.wdv-welcome {
    margin-bottom: 3rem;
} 

.wdv--events {
    border-top: 1px solid var(--color-blue);
    cursor: pointer;
}

.wdv--event {
    padding: .5rem 0 1rem;
    padding-left: var(--padding-left);
    padding-right: var(--padding-left);
    border-bottom: 1px solid var(--color-blue);
}

.wdv--event.disabled {
    opacity: .3;
}

.wdv--event_details {
    margin: 1rem 0;
}

.wdv--event > article {
    height: 0;
    overflow-y: hidden;
    transition: 300ms ease-in-out;
}

.wdv--event > span {
    display: block;
    margin-top: .5rem;
    margin-left: -.25rem;
}

/* ACTIVE */
.wdv--event.active {
    background-color: var(--color-blue);
}

.wdv--event.active * {
    color: var(--color-white);
}

.wdv--event.active > span {
    color: var(--color-blue);
}


/* DESKTOP */
@media only screen and (min-width: 1024px) {
    .wdv-welcome {
        margin-bottom: 4rem;
    }


    .wdv--event {
        padding: .75rem 1rem;
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        column-gap: 1rem;
    }

    .wdv--event h3 {
        grid-column: 1/-2;
        grid-row: 1;
    }

    .wdv--event h4 {
        grid-column: 1/-2;
        grid-row: 2;
    }

    .wdv--event > span {
        grid-column: -2/-1;
        grid-row: 1;
        margin-top: .25rem;
        height: fit-content;
    }

    .wdv--event_details {
        grid-column: 1/7;
        grid-row: 3;
    }

    .wdv--event>article {
        grid-column: 9/-1;
    }
}


@media (hover: hover) {
    .wdv--event:hover {
        background-color: var(--color-blue);
    }

    .wdv--event:hover * {
        color: var(--color-white);
    }

    .wdv--event:hover > span {
        color: var(--color-blue);
    }
}