@font-face {
    font-family: 'Zona Pro';
    src: url('../fonts/ZonaPro-Bold.eot');
    src: url('../fonts/ZonaPro-Bold.eot?#iefix') format('embedded-opentype'), url('../fonts/ZonaPro-Bold.woff2') format('woff2'), url('../fonts/ZonaPro-Bold.woff') format('woff'), url('../fonts/ZonaPro-Bold.ttf') format('truetype'), url('../fonts/ZonaPro-Bold.svg#ZonaPro-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Zona Pro';
    src: url('../fonts/ZonaPro-Black.eot');
    src: url('../fonts/ZonaPro-Black.eot?#iefix') format('embedded-opentype'), url('../fonts/ZonaPro-Black.woff2') format('woff2'), url('../fonts/ZonaPro-Black.woff') format('woff'), url('../fonts/ZonaPro-Black.ttf') format('truetype'), url('../fonts/ZonaPro-Black.svg#ZonaPro-Black') format('svg');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
.app {
    width: 75%;
    margin: 0 auto;
}

.banner_wrapper {
    --multiplier: 1;
    --title-fs: calc(24px * var(--multiplier));
    --title-line-height: calc(22.5px * var(--multiplier));
    --title-fs-mobile: 17.5px;
    --title-line-height-mobile: 15.5px;
    --description-fs: calc(14.5px * var(--multiplier));
    --description-line-height: calc(13.5px * var(--multiplier));
    --description-fs-mobile: 10.5px;
    --description-line-height-mobile: 10px;
    --btn-fs: calc(9px * var(--multiplier));
    --btn-line-height: calc(8px * var(--multiplier));
    --btn-fs-mobile: 9.5px;
    --btn-line-height-mobile: 8px;
    --banner_bgColor: ;
    --banner_txtColor: #000000;
    --banner_btnColor: #000000;
    --banner_btnTxtColor: #ffffff;
    background-image: url('../img/DB_mobile_324x218_BYW.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: right;
    max-width: 912px;
    margin: 0 auto;
    color: var(--banner_txtColor);
}
.banner_wrapper *,
.banner_wrapper ::after,
.banner_wrapper ::before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Zona Pro', sans-serif;
}
@media (min-width: 768px) {
    .banner_wrapper {
        background-image: url('../img/DB_desktop_v2_1840x367_BYW.png');
    }
}
@media (orientation: landscape) and (max-width: 1180px) {
    .banner_wrapper {
        background-image: url('../img/DB_desktop_v1_1148x367_BYW.png');
        background-position: 60%;
    }
}
.banner_wrapper .banner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    min-height: 183.5px;
}
@media (min-width: 1024px) {
    .banner_wrapper .banner {
        padding: 1rem;
    }
}
@media (min-width: 1280px) {
    .banner_wrapper .banner {
        padding-left: 8%;
    }
}
.banner_wrapper .banner .banner_details {
    width: 60%;
    max-width: 525px;
    padding-left: 1rem;
}
@media (min-width: 560px) {
    .banner_wrapper .banner .banner_details {
        width: 35%;
    }
}
.banner_wrapper .banner .banner_details p.title {
    margin-bottom: 0.75rem;
    font-weight: 900;
    font-size: var(--title-fs-mobile);
    line-height: var(--title-line-height-mobile);
}
@media (min-width: 1024px) {
    .banner_wrapper .banner .banner_details p.title {
        font-size: var(--title-fs);
        line-height: var(--title-line-height);
    }
}
.banner_wrapper .banner .banner_details p.description {
    margin-bottom: 0.75rem;
    font-weight: bold;
    font-size: var(--description-fs-mobile);
    line-height: var(--description-line-height-mobile);
}
@media (min-width: 1024px) {
    .banner_wrapper .banner .banner_details p.description {
        font-size: var(--description-fs);
        line-height: var(--description-line-height);
    }
}
.banner_wrapper .banner .banner_details .btn-join-team {
    background-color: var(--banner_btnColor);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--banner_btnTxtColor);
    border-radius: 3px;
    font-weight: bold;
    font-size: var(--btn-fs-mobile);
    line-height: var(--btn-line-height-mobile);
    border: none;
    outline: none;
    padding: 1em;
    cursor: pointer;
}
@media (min-width: 1024px) {
    .banner_wrapper .banner .banner_details .btn-join-team {
        font-size: var(--btn-fs);
        line-height: var(--btn-line-height);
    }
}