.at-calendar {
    display: flex; /** To disable overlapping margins */
}

.at-calendar .g-container__inner {
    container-type: inline-size;
}

.at-calendar:not(.--hasBackground) + .at-calendar:not(.--hasBackground) {
    margin-top: calc(-1 * var(--marginLarge));
}

.at-calendar.--hasBackground + .at-calendar.--hasBackground {
    margin-top: calc(-3 * var(--marginLarge)) !important;
}

.at-calendar:not(.--hasBackground) + .at-calendar .at-calendar__item,
.at-calendar.--hasBackground + .at-calendar.--hasBackground .at-calendar__item {
    margin-top: var(--marginSmall);
}

.at-calendar__item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 1rem;
    padding: 14px;
    border: 1px solid var(--primaryColor200);
    border-radius: var(--borderRadius);
    background-color: var(--baseLight500);
}

.at-calendar.--hasBackground .at-calendar__item {
    background-color: var(--baseLight100);
}

.at-calendar__item:has( .at-calendar__date) {
    border-color: var(--secondaryColor200);
    background-color: var(--secondaryColor100);
}

.at-calendar.--purple .at-calendar__item:has( .at-calendar__date) {
    border-color: var(--primaryColor200);
}

.at-calendar__date {
    font-size: var(--h5Size);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05rem;
    color: var(--primaryColor500);
}

.at-calendar__title {
    margin-block: .5em;
    font-family: var(--siteFont);
    font-weight: 700;
    color: var(--baseDark500);
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

.at-calendar__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    aspect-ratio: 1;
    border-radius: 50%;
    color: var(--baseLight100);
    background-color: var(--tertiaryColor500);
}

.at-calendar__icon::after {
    margin: 0;
    width: 2rem;
}

.at-calendar__link {
    width: 100%;
}

@container (min-width: 343px) {
    .at-calendar__item {
        flex-direction: row;
        padding-inline-start: 23px;
    }

    .at-calendar__date {
        display: flex;
        align-items: center;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        width: 9ch;
        min-height: 35px;
        overflow: hidden;
        padding-right: 1rem;
        line-height: 1.2;
        border-right: 1px solid var(--secondaryColor200);
    }

    .at-calendar.--purple .at-calendar__item:has( .at-calendar__date) .at-calendar__date {
        border-color: var(--primaryColor200);
    }

    .at-calendar__icon {
        width: 62px;
    }

    .at-calendar__title {
        flex: 0 0 calc(100% - 100px - 62px - 2rem);
        max-width: calc(100% - 100px - 62px - 2rem);
    }
}

@media (min-width: 1024px) {
    .at-calendar__item {
        margin-inline: -1.5rem;
    }
}