/*==============================*/
/*=====----- TEMPLATE -----=====*/
/*==============================*/

.upcoming-events {
    padding: 0 32px;
    margin-bottom: 64px;
}

.upcoming-events .widget-header {
    margin: 0;
    padding: 15px 20px;
    background: var(--gray-dark);
    color: var(--white);
}

.upcoming-events .widget-title {
    margin: 0;
    font-family: var(--pitch);
    font-weight: normal;
    font-size: 18px;
    line-height: 1.1;
    text-transform: uppercase;
}

.upcoming-events .slides {
    padding: 16px;
    border: 2px solid var(--gray-border-2);
    border-top: none;
}

/*============================*/
/*=====----- SLIDES -----=====*/
/*============================*/

.upcoming-events .slide {
    padding: 24px 0;
    border-bottom: 1px solid var(--gray-border-2);
    color: var(--gray);
}

.upcoming-events .slide:first-child {
    padding-top: 12px;
}

.upcoming-events .slide:last-child {
    padding-bottom: 12px;
    border-bottom: none;
}

.upcoming-events .slide-row {
    display: flex;
    align-items: flex-start;
    color: inherit;
}

.upcoming-events .slide-date {
    display: block;
    margin-right: 20px;
    font-family: var(--helvetica-bold);
    font-weight: normal;
    font-size: 16px;
    line-height: 1.1;
    color: var(--gray-light);
}

.upcoming-events .slide-title {
    font-weight: normal;
    font-size: 16px;
    line-height: 1.25;
}

.upcoming-events .slide-divider {
    display: none;
}

/*===================================*/
/*=====----- MEDIA QUERIES -----=====*/
/*===================================*/

@media (min-width: 64em) {
    .upcoming-events {
        width: 267px;
        padding: 0;
        margin: 0;
    }

    .upcoming-events .slides {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
    }

    .upcoming-events .slides .slide {
        border-bottom: none;
    }

    .upcoming-events .slide-divider {
        display: block;
        content: "";
        width: 100%;
        height: 1px;
        background-color: var(--gray-border-2);
    }
}