.upcoming {
    width: 100%;
    flex-grow: 1;
    /* overflow: hidden; */
    padding-bottom: 0;
}

.upcoming>h3 {
    margin-bottom: 2rem;
}

.upcoming>h2 {
    text-transform: uppercase;
    letter-spacing: 2px;
    word-spacing: 5px;

    display: flex;

    align-items: center;

    column-gap: 1rem;

    width: 100%;

    justify-content: center;

    height: 2rem;
    margin-bottom: 0;

    -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

.upcoming>h2>*{
    color:black;
}

.upcoming>h2>span {
    cursor: pointer;
    transition-property: font-size, color;
    transition-duration: 500ms;
}

.upcoming>h2>span.enav-series::after {
    content: "Upcoming";
}

.upcoming>h2>span.enav-events::after {
    content: "Past";
}

.upcoming>h2>span.enav-calendar::after {
    content: "Calendar";
}

.upcoming>h2>span:hover {
    font-size: 1.75rem;
}

.upcoming>h2>.selected {
    font-size: 2rem !important;
    cursor: default;
}

.upcoming>h2>span.enav-series.selected {
    color: rgb(167, 39, 39);
}

.upcoming>h2>span.enav-events.selected {
    color: rgb(79 70 229);;
}

.upcoming>h2>span.enav-calendar.selected {
    color: rgb(222, 196, 95);
}

.upcoming .event-list {
    display: flex;
    flex-direction: column;
    row-gap: 60px;
    /* margin-bottom: 60px; */
}

.upcoming .event-list>.event {
    margin: 0;
    margin-left: auto;
    margin-right: auto;
}

.upcoming>.enav-panes {
    display: grid;
    grid-template-columns: 1fr;
}

.upcoming>.enav-panes>* {
    width: 100%;
    grid-row-start: 1;
    grid-column-start: 1;
    transition-property: transform, opacity;
    transition-duration: 1s;
    transform: translateX(0%);
    opacity: 100%;
    margin-top: 36px;
    z-index: 10;
}

.upcoming>.enav-panes>:not(.selected) {
    max-height: 0;
}

.upcoming>.enav-panes>.left {
    transform: translateX(-100%);
    opacity: 0%;
    z-index: 10;
}

.upcoming>.enav-panes>.right {
    transform: translateX(100%);
    opacity: 0%;
    z-index: 10;
}

.upcoming>h1 {
    text-align: center;
    letter-spacing: 0.25em;
    padding-bottom: 0.75em;
    padding-top: 0.75em;
    margin: 0;
    font-family: "Montserrat", sans-serif;

    --tw-gradient-to: #e5e7eb;
    --tw-gradient-from: #f3f4f6;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    background-image: linear-gradient(to right, var(--tw-gradient-stops));

    --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);

    z-index: 20;

    width: 100%;
}

.calendar-button-shows {
    width: 0;
    margin-left: auto;
}

.calendar-button-shows > div {
    width: max-content;
    float: right;
}

@media (max-width: 899px) {
    .event {
        flex-direction: column;
        box-shadow: none;
    }

    .event-list {
        row-gap: 0 !important;
    }

    .event-photo {
        display: block !important;
    }

    .event-photo > img {
        border-top-left-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
        width: 100% !important;
        height: 300px !important;
        object-position: top;
    }

    .calendar-button-shows {
        width: 100%;
        margin-left: auto;
        position:absolute;
    }

    .calendar-button-shows > div {
        position: absolute;
        top: 0;
        right: 0;
    }

    .upcoming>h1 {
        position: sticky;
        top: 70px;
    }
}

@media (min-width: 900px) {
    .content > :nth-last-child(1 of .upcoming) {
        padding-bottom: 60px;
    }

    .upcoming>h1 {
        box-shadow: none;
    }
}