/* ___ SHOWCASE ___ */
.showcase {padding-top: 60px;}
.showcase .container {max-width: 110%; padding: 0;}
.showcase .title {text-align: center;}
.showcase .title :first-child {font-size: var(--fs-xl, 42px); font-weight: 800; line-height: 1.3;}
.showcase .title :first-child * {color: var(--c-primary);}
.showcase .wrapper {position: relative;}
.showcase .slick-slide img {height: 305px; object-fit: cover; border-radius: 12px;}
.showcase .slick-slide:hover {transform: scale(1.1); transition: var(--transition);}
.showcase .slick-track {display: flex; gap: 12px; padding-block: 36px 60px;}
.showcase .slick-arrow {position: absolute; top: calc(50% - 20px); width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background-color: #fff; border-radius: 50%; z-index: 50;}
.showcase .slick-arrow img {filter: var(--filter-primary);}
.showcase .prev-btn {left: 5%;}
.showcase .next-btn {right: 5%;}

/* ___ 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: 615px; height: 515px; object-fit: cover; border-radius: 10px;}

@media only screen and (max-width: 991px) {
    .showcase {padding-top: 50px;}
    .showcase .slick-track {padding-block: 30px 50px;}
    .modal img {max-width: 500px; height: 406px;}
}

@media only screen and (max-width: 767px) {
    .modal img {max-width: 400px; height: 325px;}
}

@media only screen and (max-width: 575px) {
    .showcase {padding-top: 30px;}
    .showcase .title :first-child {line-height: 1.2;}
    .showcase .slick-track {padding-block: 20px 30px;}
    .showcase .slick-slide:hover {transform: scale(1);}
    .modal img {max-width: 80%; height: auto;}
}

@media only screen and (max-width: 475px) {
    .showcase .slick-slide img {height: auto;}
}