:where(.event-card) {
    border: 1px solid var(--color-brand-grey);
    border-radius: var(--border-radius-common);
    background-color: var(--color-primary-white);
    display: flex;
    flex-flow: column;
    overflow: hidden;
    justify-items: center;
    height: 100%;

    :where(.event-head) {
        display: grid;
        grid-template-columns: 3fr 1fr;
        grid-template-rows: 4.5rem auto;
        gap: 2px;
        padding-inline: 2rem;

        :where(.event-type) {
            grid-column: 1;
            grid-row: 1;
            padding-top: 1.5rem;
            color: var(--color-brand-dark-grey);
        }

        :where(.event-title) {
            grid-column: 1;
            grid-row: 2;
            margin-top: 0;
            margin-bottom: 0;
            padding-bottom: 1.8rem;
            color: var(--color-brand-dark-grey);
        }

        :where(.event-date) {
            grid-column: 2;
            grid-row: 1 / -1;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-top: 1rem;
            margin-bottom: 1.8rem;
            background-color: var(--color-brand-corporate-blue);
            height: 11rem;
            width: 7rem;

            :where(.first-date-month) {
                font-size: 2.5rem;
                font-weight: 700;
                color: var(--color-primary-white);
                line-height: 1.4;
            }

            :where(.first-date-day) {
                font-size: 4rem;
                font-weight: 700;
                color: var(--color-primary-white);
                line-height: 1;
            }
        }

    }

    :where(.event-body) {
        width: 88%;
        margin-inline: auto;
        margin-top: 0;
        margin-bottom: 2rem;

        :where(.excerpt) {
            margin-top: 0;
            display: -webkit-box;
            overflow: hidden;
            -webkit-line-clamp: 4;
            -webkit-box-orient: vertical;
            color: var(--color-brand-dark-grey);
        }

        :where(.location-dates) {
            display: grid;
            grid-template-columns: 1fr;
            gap: 2rem;
            margin-bottom: 3rem;

            :where(.dates, .location) {
                width: 100%;
                display: grid;
                grid-template-columns: 2rem 1fr;
                grid-template-rows: auto auto;
                gap: .5rem;
                color: var(--color-brand-dark-grey);

                :where(.svg) {
                    text-align: center;
                    grid-column: 1;
                    grid-row: 1;
                }

                :where(.svg svg) {
                    height: 1.2rem;
                }

                :where(.date-spans) {
                    grid-column: 2;
                    grid-row: 1 / -1;
                }
            }
        }
    }

    :where(.event-image) {
        position: relative;
        width: 100%;
        margin-top: auto;


        :where(img) {
            aspect-ratio: 1 / 1;
            object-fit: cover;
            width: 100%;
            min-width: 30rem;
            height: auto;
        }

        :where(.event-link) {
            position: absolute;
            bottom: -17.5px;
            right: 3rem;
            height: 3.5rem;
            width: 3.5rem;
            border-radius: 50%;
            background-color: var(--color-brand-sky-blue);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 999;

            & svg {
                height: 1rem;
                width: 2rem;
                fill: var(--color-primary-white);

            }

            &:hover {

                background-color: var(--color-brand-corporate-blue);
            }
        }
    }

    :where(.event-footer) {
        height: 4rem;

    }
}

:where(.event-card.slick-slide) {
    height: 100%;
    position: relative;

    :where(.event-image) {
        position: absolute;
        bottom: 4rem;
        left: 0;
        right: 0;
    }

    :where(.event-footer) {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
    }

    :where(.event-body) {
        margin-bottom: 35rem;
    }
}

@media (max-width: 75rem) {
    :where(.event-card.slick-slide) {
        :where(.event-body) {
            margin-bottom: 38rem;
        }
    }
}

@media (max-width: 75rem) {
    :where(.event-card.slick-slide) {
        :where(.event-body) {
            margin-bottom: 38rem;
        }
    }
}