#owl-banner-home-top{
    .img-overlay{
        position: relative;
        &:before{
            content: '';
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 1;
            background: rgba(0, 0, 0, .3);
        }
    }
    .overlay-content{
        display: block;
        width: 100%;
        background-color: var(--color-black);
        padding: 1.875rem 1rem;
        .overlay-text{
            display: block;
            color: var(--color-white);
            font-size: 24px;
            line-height: 30px;
            font-weight: var(--fw-semibold);
            text-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
        }
        .btn{
            margin-top: 1.5rem;
            border: 1px solid var(--color-white);
        }
    }
    @media (min-width: 992px){
        .overlay-content{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 2;
            max-width: 80%;
            background-color: transparent;
            text-align: center;
            .overlay-text{
                font-size: 48px;
                line-height: 56px;
            }
            .btn{
                border: none;
            }
        }
    }
    a:hover .btn{
        background-color: var(--btn-dark-background-color-hover-60);
    }
    .owl-controls{
        margin-top: 1rem;
        .owl-nav{
            position: absolute;
            top: 50%;
            transform: translateY(calc(-50% - 20px));
            width: 100%;
            z-index: 10;
            .owl-prev, .owl-next{
                padding: 0;
                margin: 0;
                position: absolute;
                background: none;
                img{
                    width: 2rem;
                }
            }
            .owl-prev{
                left: 1rem;
            }
            .owl-next{
                img{
                    transform: scaleX(-1);
                }
                right: 1rem;
            }
        }
    }
    &.owl-theme .owl-dots .owl-dot span{
        outline: 1px solid var(--color-black);
        background-color: var(--color-white);
        width: 8px;
        height: 8px;
    }
    &.owl-theme .owl-dots .owl-dot.active span{
        background-color: var(--color-black);
    }
    @media (max-width: 992px){
        .owl-nav{
            display: none !important;
        }
    }
}
.section-home-welcome{
    margin-block: 3rem 2.5rem;
    text-wrap: balance;
    .h1 + p{
        margin-top: 1.5rem;
    }
    text-align: left;
    @media (min-width: 992px){
        text-align: center;
    }
}
.section-brands-text{
    background-color: var(--color-black);
    color: var(--color-white);
    padding-block: 3.3rem;
    h2{
        font-size: 32px;
        line-height: 1.1;
    }
    @media (min-width: 992px){
        text-align: center;
    }
}
.section-banner-home-discover{
    background-color: var(--color-black);
    align-items: center;
    .grid-overlap{
        place-items: center;
    }
    .banner-home-discover-image{
        width: 100%;
        position:relative;
        &:before{
            content: '';
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 1;
            background: rgba(0, 0, 0, .3);
        }
    }
    .banner-home-discover-image img{
        width: 100%;
        height: auto;
        object-fit: cover;
    }
}
.banner-home-discover-text{
    padding-block: 1.5rem;
    z-index:1;
    .overlay-text{
        font-size: 24px;
        font-weight: var(--fw-semibold);
        line-height: 1.2;
        color: var(--color-white);
        text-wrap: balance;
        margin: 0;
    }
    .btn{
        margin-top: 1.5rem;
        margin-bottom: 0;
        display: inline-flex;
    }
}
@media (min-width: 992px){
    .section-banner-home-discover{
        text-align: center;
        a{
            display: grid;
            grid-template-areas: "overlap-content";
            place-items: center;
            & > *{
                grid-area: overlap-content;
            }
        }
        .btn.outline{
            border: none;
        }
        &:hover .btn{
            background-color: var(--btn-dark-background-color-hover-60);
        }
    }
    .banner-home-discover-text{
        .overlay-text{
            font-size: 32px;
        }
    }
}
.section-home-gallery{
    margin-bottom: 2rem;
    @media (min-width: 992px){
        margin-bottom: 5rem;
    }
    a{
        padding-inline: .5rem;
        position: relative;
        display: block;
        margin-bottom: 1rem;
        &[href]:hover{
            img{
                filter: brightness(.9);
            }
            .gallery-cnt{
                color: var(--link-color-light-hover)
            }
        }
    }
    img{
        width: 100%;
        height: auto;
        transition: all .2s ease-in-out;
    }
    .gallery-cnt{
        position: absolute;
        top: auto;
        left: .5rem;
        right: .5rem;
        bottom: 0;
        z-index: 1;
        background: rgba(0, 0, 0, .8);
        padding: 1rem 1.25rem;
        font-size: 14px;
        line-height: 18px;
        color: var(--link-color-light);
        .cnt-title{
            font-weight: var(--fw-semibold);
        }
    }
}
.isotope-grid .gallery-item,
.isotope-grid .grid-sizer{
    width: 100%;
}
@media (min-width: 576px){
    .isotope-grid .gallery-item,
    .isotope-grid .grid-sizer{
        width: 50%;
    }
}
@media (min-width: 768px){
    .isotope-grid .gallery-item,
    .isotope-grid .grid-sizer{
        width: 33.333%;
    }
}