/**
 * Upcreators
 * Upcreators is the template for Agency, Streamers, Shop, Blog, Portfolio, Events, etc
 * Exclusively on https://1.envato.market/upcreators-html
 *
 * @encoding        UTF-8
 * @version         1.0.0
 * @copyright       (C) 2018 - 2022 Merkulove ( https://merkulov.design/ ). All rights reserved.
 * @license         Envato License https://1.envato.market/KYbje
 * @contributors    Lilith Lamber (winter.rituel@gmail.com)
 * @support         help@merkulov.design
 **/
// banner component

.banner {
    background: $accent2;

    &_main {
        margin-bottom: 40px;

        &-title {
            margin-bottom: 20px;
        }
    }

    &_media {
        position: relative;

        &-img {
            height: 180px;
            position: relative;
            z-index: 1;

            img {
                height: 100%;
            }
        }

        .getup {
            position: absolute;
            left: 0;
            bottom: -60px;
            z-index: 2;
        }
    }
}

// media queries

// --- tablet
@media screen and (min-width: 767.98px) {
    .banner {

        &_media {
            &-img {
                height: 260px;
            }

            .getup {
                bottom: -70px;
            }
        }
    }
}

// --- desktop
@media screen and (min-width: 1169.98px) {
    .banner {
        padding: 100px 0 0;

        .container {
            display: flex;
            margin-right: calc(50vw - 885px);
            margin-left: 0;
            max-width: unset;
            padding: 0;
            gap: 60px;
            align-items: flex-end;
            justify-content: flex-end;
        }

        &_main {
            padding: 0 0 150px 20px;
            margin-bottom: 0;
            &-title {
                margin-bottom: 30px;
            }
        }
    }
}

@media screen and (min-width: 1365.98px) {
    .banner {
        &_main {
            flex-grow: 1;

            &-title {
                max-width: 800px;
            }
        }

        &_media {
            max-width: 585px;
            width: 100%;
            &-img {
                height: 330px;
            }
        }
    }
}

@media screen and (min-width: 1769.98px) {
    .banner {
        .container {
            margin-left: calc(50vw - 885px);
            margin-right: 0;
            gap: 150px;
        }
        &_media {
            max-width: calc(100% - 950px);
        }
    }
}