/* START DESCRIPTION BANNER */
.description-banner {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 528px;
    height: 100%;
    background-size: 90% 100%;
    background-origin: content-box;
    background-repeat: no-repeat;
    margin: 60px 0;
    background-color: var(--background-list-white);
}

.description-banner.grey {
    background-color: var(--background-list-grey);
}

.description-banner.dark-grey {
    background-color: var(--background-list-dark-grey);
}

.description-banner.left {
    background-position: top right;
}

.description-banner.right {
    background-position: top left;
}

/* Inner Banner */
.description-banner .inner-banner {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    margin: 56px 0 56px calc((100% - 1248px) / 2);
    justify-content: space-between;
    flex-direction: initial;
    position: relative;
}

.description-banner .inner-banner.right {
    flex-direction: row;
}

.description-banner .inner-banner.left {
    flex-direction: row-reverse;
    margin: 56px calc((100% - 1216px) / 2) 56px 0;
}

.description-banner.no-background .inner-banner {
    margin: 56px auto 56px;
    max-width: 1316px;
    padding: 0 32px;
}

/* Info */
.description-banner .inner-banner .info {
    width: 47%;
    height: 100%;
    padding: 37px 70px 37px 0;
}

.description-banner .inner-banner.left .info {
    width: 47%;
    height: 100%;
    padding: 37px 0 37px 70px;
}

.description-banner .inner-banner .info .title {
    font-size: var(--text-l);
    letter-spacing: 1px;
    font-family: var(--font-frutiger-bold);
    padding-bottom: 25px;
    line-height: 36px;
}

.description-banner .inner-banner .info .description {
    font-size: var(--text-m);
    line-height: 26px;
    letter-spacing: 0.5px;
}

.description-banner .inner-banner .info .button {
    margin-top: 40px;
    width: fit-content;
}

.description-banner .inner-banner .info .button .generic-btn .left p {
    text-transform: uppercase;
}

.description-banner .inner-banner .top-img-div {
    position: absolute;
    width: 53%;
    min-height: 416px;
    right: 0;
    height: 100%;
}

.description-banner .inner-banner.left .top-img-div {
    left: 0;
    right: unset;
}

.description-banner.no-background .inner-banner .top-img-div {
    position: unset;
}

.description-banner .inner-banner .top-img-div .image-container {
    width: 100%;
    height: 100%;
}

.description-banner .inner-banner .top-img-div .image-container img {
    width: 100%;
    object-fit: cover;
    height: 100%;
    will-change: transform;
    transition: transform 0.1s linear;
}
/* END DESCRIPTION BANNER */



/* START MEDIA QUERY */
@media (max-width: 1250px) {
    .description-banner .inner-banner {
        margin: 57px 0 57px 32px;
    }

    .description-banner .inner-banner.left {
        margin: 57px 32px 57px 0;
    }

    .description-banner.no-background .inner-banner {
        margin: 57px 0 57px 0;
    }
}

@media (max-width: 900px) {
    .description-banner .inner-banner .info .button .generic-btn {
        min-width: unset;
    }

    .description-banner .inner-banner .info .button .generic-btn .left{
        white-space: unset;
        min-width: unset;
    }
}

/* Tablet */
@media (max-width: 767px) {
    .description-banner .inner-banner .info .title {
        font-size: var(--text-xxxxm);
        line-height: 31px;
    }

    .description-banner .inner-banner .info .description {
        font-size: var(--text-s);
        line-height: 24px;
    }

    .description-banner .inner-banner .info {
        padding: 25px 32px 39px 0
    }

    .description-banner .inner-banner.left .info {
        padding: 25px 0 39px 32px
    }
}

/* Mobile - 600 not 375 */
@media (max-width: 680px) {
    .description-banner {
        background-size: 100% 100%;
    }

    .description-banner .inner-banner {
        flex-direction: column;
        margin: 0;
        gap: 32px;
    }

    .description-banner .inner-banner.right {
        flex-direction: column;
    }

    .description-banner .inner-banner.left {
        margin: 0;
        gap: 32px;
        flex-direction: column-reverse;
    }

    .description-banner .inner-banner .info {
        padding: 56px 16px 0;
        width: 100%;
    }

    .description-banner .inner-banner.left .info {
        padding: 0 16px 56px;
        width: 100%;
    }

    .description-banner.no-background .inner-banner .info {
        padding: 0 0 56px;
        width: 100%;
    }

    .description-banner .inner-banner .top-img-div {
        width: 100%;
        position: static;
        height: 416px;
    }

    .description-banner .inner-banner .top-img-div .image-container img {
        transform: translateY(0);
    }
}

@media (max-width: 576px) {
    .description-banner.no-background .inner-banner {
        padding: 0 16px;
    }
}
/* END MEDIA QUERY */