@import '../functions.less';
@import '../../../../files/config/colors.less';


.drs-header-01 {
    * { .fx(); }
    position: relative;
    overflow: hidden;
    margin-top: -50px;
    img {
        display: block;
        width: 100%;
        height: 100vh;
        max-height: 270px;
        object-fit: cover;
        filter: brightness(60%);
    }
    > div {
        width: 100%;
        position: absolute;
        z-index: 5;
        color: #FFF;
        top: 45%;
        .container {
            padding: 0 15px;
            h2 {
                font-size: 2.2em;
                margin-bottom: 10px;
            }
            p {
                opacity: 80%;
            }
        }
    }
    &.header .container {
        margin-top: 20px;
    }
}

@media screen and ( max-width: 1250px ){
    .drs-header-01 {
        img {
            height: 35vh;
        }
        > div .container h2 {
            margin-bottom: 5px;
        }
    }
}

@media screen and ( max-width: 850px ){
    .drs-header-01 {
        img {
            height: 30vh;
        }
        > div {
            top: 50%;
            .container h2 {
                font-size: 1.8em;
                margin-bottom: 0;
            }
        }
    }
}

@media screen and ( max-width: 600px ){
    .drs-header-01 {
        img {
            height: 25vh;
        }
    }
}