/* Header */
header {
    background: url(../../../images/home/header-bg.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.page-header {
    padding-bottom: 48px;
}

.header-carousel-item {
    margin-left: 32px;
    margin-right: 32px;
}

.header-carousel-item .header-carousel-img {
    width: 53vw;
    height: auto;
    object-fit: cover;
    border-radius: 8px;
    object-position: center;
}

.header-carousel .slick-dots li.slick-active button:before {
    opacity: .85;
    color: var(--accent-base);
}

.header-carousel .slick-dots li button:before {
    font-size: 12px;
}

.header-carousel .slick-dots li {
    margin: 0 2px;
}

/* News */
#news {
    margin-top: 64px;
    margin-bottom: 64px;
}

.news-img-headline {
    width: 100%;
    height: 25vw;
    object-fit: cover;
    object-position: center;
    border-radius: 8px;
}

.news-img-subhead {
    width: 100%;
    height: 15vw;
    object-fit: cover;
    object-position: center;
    border-radius: 8px;
}

/* Divider */
.divider {
    height: 16px;
    background-color: var(--primary-lightest);
    opacity: .05;
}

/* Event */
#event {
    margin-top: 64px;
    margin-bottom: 56px;
}

.event-img {
    width: 100%;
    height: 20vw;
    object-fit: cover;
    border-radius: 8px;
}

@media only screen and (min-width: 768px) and (max-width: 998px) {

    .header-carousel-item .header-carousel-img {
        width: 100%;
        height: 50vw;
    }

    .shop-search {
        width: 30%;
    }

    .news-img-headline {
        height: 50vw;
    }

    .news-img-subhead {
        height: 25vw;
    }

    .event-img {
        height: 40vw;
    }

}

@media only screen and (max-width: 767.98px) {

    /* Header */
    .header-carousel-item {
        margin-left: 16px;
        margin-right: 16px;
    }

    .header-carousel-item .header-carousel-img {
        width: 100%;
        height: 45vw;
    }

    .news-img-headline,
    .news-img-subhead{
        width: 100%;
        height: 33vw;
        object-fit: cover;
    }

    .event-img {
        width: 100%;
        height: 65vw;
        object-fit: cover;
    }

    .mobile-marginB-4 {
        margin-bottom: 32px;
    }
}