/*****************************
08 - Component - Banner
*****************************/
.banner{

    &--1{
        margin-top: 60px; 

        @include breakpoint(medium){
            margin-top: 80px;
        } 

        @include breakpoint(large){
            margin-top: 100px;
        }
    }

    &--2{
        margin-top: 60px;
        @include breakpoint(medium){
            margin-top: 80px;
        }

        @include breakpoint(large){
            margin-top: 0;
        }

        & .row .col-12 {
            margin-top: 30px;

            &:first-child{
                margin-top: 0;
            }
        }
    }

    & .col-12 > &__box{
        margin-bottom: 30px;
        @include breakpoint(medium){
            margin-bottom: 0px;
        }
    }

    & .col-12:last-child > &__box{
        margin-bottom: 0;
    }

    &__box{
        width: 100%;
        overflow: hidden;
        border-radius: 3px;
    }
    
    &__link{
        display: block;
        &::after{
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            opacity: 0;
            background: rgba(255, 255, 255, 0.2);
            width: 100%;
            height: 100%;
            transform: scale(0.7);
            transition: all .5s ease;
        }
        
        &:hover::after{
            transform: scale(1);
            opacity: 1;
        }
    }
    
    &__img{
        width: 100%;
        object-fit: cover;
        transform: scale(1);
        transition: all 1s ease;
        
       
    }
    
    &__box:hover &__img{
        transform: scale(1.1);
    }

}
