/* ___ BANNER ___ */
.banner .container {max-width: 100%; padding: 0;}
.banner .wrapper {position: relative;}
.banner .images picture img {width: 100%; height: 780px; object-fit: cover;}
.banner .main {position: absolute; bottom: 0; left: 0; right: 0; display: flex; align-items: flex-end; width: 100%; max-width: var(--container-size); height: 100%; padding: 42px var(--container-padding); margin-inline: auto;}
.banner .content {max-width: 450px; background-color: var(--_c-bg-white); padding: 36px; box-shadow: 0px 4px 4px rgba(0, 0, 0, 25%); border: 2px solid #000; border-radius: 22px;}
.banner .content > :first-child  {font-size: var(--fs-xl, 42px); font-weight: 800; line-height: 1; margin-bottom: 10px;} 
.banner .content > :first-child * {color: var(--c-primary);}
.banner .content p {max-height: 175px;}
.banner .slick-arrow {position: absolute; top: 48%; width: 50px; height: 50px; z-index: 50;}
.banner .slick-arrow img {width: 30px; height: 30px; filter: invert(1);}
.banner .prev-btn {left: 2%;}
.banner .next-btn {right: 2%;}

/* ___ GALLERY ___ */
.gallery {padding-block: 48px;}
.gallery .wrapper {display: grid; grid-template-columns: repeat(3, 1fr); gap: 35px;}
.gallery .item {position: relative;}
.gallery .item img {height: 572px; object-fit: cover;}
.gallery .item[data-video="true"]::after {position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: no-repeat center/76px url('https://www.partyenergizers.com/theme/website/images/play.webp'); content: '';}
.gallery .item:hover {box-shadow: 0 10px 50px 0 rgba(0, 0, 0, 30%); border-radius: 12px; transition: var(--transition);}
.gallery .item:hover img {border-radius: 12px; transition: var(--transition);}

/* ___ MODAL ___ */
.modal {width: 100%; height: 100%; position: fixed; top: 0; display: flex; justify-content: space-between; align-items: center; background-color: rgba(0, 0, 0, 0.9); padding-inline: 20px; margin-top: -1px; z-index: 100; animation: zoom 0.3s ease-in-out;}
.modal button:hover {background-color: var(--c-primary);}
.modal #close-btn {position: absolute; top: 25px; right: 30px;}
.modal img {width: 100%; max-width: 430px; height: 515px; object-fit: cover; border-radius: 10px;}

@media only screen and (max-width: 1200px) {
    .gallery .item img {height: 500px;}
}


@media only screen and (max-width: 991px) {
    .banner .images picture img {max-height: 540px;}
    .banner .content {padding: 30px;}
    .banner .slick-arrow {top: 25%;}
    .gallery .wrapper {gap: 30px;}
    .gallery .item img,
    .modal img {height: 400px;}
}

@media only screen and (max-width: 767px) {
    .banner .main {height: 100%; align-items: center; justify-content: center; padding-block: 0;}
    .banner .slick-arrow {top: 0; bottom: 0; margin-block: auto;}
    .gallery {padding-block: 40px;}
    .gallery .wrapper {grid-template-columns: repeat(2, 1fr); gap: 20px;}
    .gallery .item[data-video="true"]::after {background: no-repeat center/56px url('https://www.partyenergizers.com/theme/website/images/play.webp');}
    .modal img {height: 325px;}
}

@media only screen and (max-width: 575px) {
    .banner .images picture img {max-height: 400px;}
    .banner .content {padding: 24px;}
    .banner .slick-arrow {top: auto; bottom: 4%; margin: 0;}
    .gallery {padding-block: 30px;}
    .gallery .item img {height: 300px;}
    .modal img {max-width: 80%; height: auto;}
}

@media only screen and (max-width: 475px) {
    .banner .images picture img {max-height: 350px;}
    .gallery .wrapper {grid-template-columns:  1fr;}
    .gallery .item img {height: auto;}
}