.meetingList__list {
    display: grid;
    gap: var(--gutterLarge);
    margin: 0;
    padding: 0;
    list-style: none;
}

.meetingList__list.--2col {
    grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
}

.meetingList__list + * {
    margin-top: var(--marginSmall);
}

.meetingList__item {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--gutter);
}

.meetingList__item:not(.meetingList__item--noLink):hover .meetingList__date {
    background-color: var(--primaryColor500);
}

.meetingList__itemDetails {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.meetingList__title {
    margin: 0;
    word-break: break-word;
    transition: color .3s ease-in-out;
}

.meetingList__time,
.meetingList__location {
    font-size: 1rem;
    font-style: normal;
    color: var(--primaryColor300);
}

.meetingList__location span {
    display: inline-block;
    margin-left: .5rem;
}

.meetingList__item .tagList {
    color: var(--primaryColor400);
}

.meetingList__date {
    order: -1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: clamp(60px, 8vw, 80px);
    height: clamp(60px, 8vw, 80px);
    flex: 0 0 clamp(60px, 8vw, 80px);
    aspect-ratio: 1;
    background-color: var(--secondaryColor500);
    transition: background-color .3s ease-in-out;
}

.meetingList__date > * {
    font-family: var(--proximaBold);
    line-height: 1;
    color: var(--baseLight100);
}

.datetime__day {
    font-size: var(--h3Size);
}

.datetime__month {
    font-size: var(--14Size);
}