.hero {
    padding: 96px 17px 48px;
    max-height: 1000px;

    .hero__carousel {

        .slick-slide {
            figure {
                aspect-ratio: 3 / 2;
                
                a, 
                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    object-position: right;
                    border-radius: 16px;
                }
            }
        }

        .slick-arrow {
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 2;
            width: 40px;
            height: 30px;

            &::before {
                display: block;
                background-size: contain;
                background-repeat: no-repeat;
                background-position: center;
                width: 74px;
                height: 50px;
            }
        }

        .slick-prev {
            left: 16px;
            
            &::before {
                content: "";
                background-image: url('../../../../assets/images/icon-left.png');
            }
        }

        .slick-next  {
            right: 16px;

            &::before {
                content: "";
                background-image: url('../../../../assets/images/icon-right.png');
            }
        }
    
        .slick-dots {
            bottom: -40px;

            li button {
                display: flex;
                justify-content: center;
                align-items: center;
                height: 23px;

                &::before {
                    position: relative;
                    opacity: 1;
                }
            }

            
            .slick-active {
                padding: 2px;
                border: 1px solid var(--wp--preset--color--primary);
                border-radius: 64px;

                button::before {
                    color: var(--wp--preset--color--primary);
                }
            }
        }
    }
}

@media only screen and (min-width: 1200px) {
    .hero {
        padding: 170px 0 48px;
    
        .hero__carousel {
    
            .slick-slide {
                figure {
                    aspect-ratio: auto 1760 / 723;
                }

                a, 
                img {
                    border-radius: 30px !important;
                    object-position: center !important;
                }
            }

            .slick-arrow {
                width: 74px;
                height: 50px;
            }
        }
    }
}

@media only screen and (max-width: 1300px) {
    .hero {
        margin-top: 50px;
        .hero__carousel {
    
            .slick-slide {

                a, 
                img {

                    /* @media (orientation: landscape) { */
                        object-fit: contain !important;
                    /* } */
                }
            }
        }
    }
}

@media only screen and (min-width: 1400px) {
    .hero {
        padding-top: 184px;
    }
}

@media only screen and (min-width: 1921px) {
    .hero__carousel {
        max-width: 1920px;
    }
}