.bertone-x-riocam .panel:not(.vh-100) {
    height: auto;
}

.d-block {
    display: block;
}

.d-none {
    display: none;
}

.banner,
.riocam-banner-page {
    position: relative;
    z-index: 1;
}


.banner-riocam img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.banner .banner-texts {
    max-width: 1310px;
}

.banner-riocam-heading {
    position: relative;
    padding: 10px 16px;
    font-size: 30px;
    line-height: 110%;
    letter-spacing: 0;
    border-left: 1px solid #fff;
}

.headline--title {
    margin: 0;
    font-size: 26px;
    line-height: 106%;
    text-transform: uppercase;
    letter-spacing: -0.03rem;
    color: #f3f0eb;
}

.headline--description {
    margin: 0;
    font-family: "Tenor Sans", sans-serif;
    font-size: 22px;
    line-height: 126%;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: #f3f0eb;
}

.col-image {
    font-size: 0;
}

.riocam-banner-page img,
.col-image img {
    width: 100%;
}

.riocam-about {
    padding: 80px 0 100px;
}

.riocam-about--row {
    display: grid;
    grid-row-gap: 40px;
}

.col-headline {
    position: relative;
}

.riocam-about .col-headline::before {
    content: "";
    position: absolute;
    right: -7%;
    bottom: -2%;
    width: 105px;
    height: 1px;
    background: #ff4409;
    transform: rotate(138deg);
}

.riocam-about--paragraph {
    border-left: 1px solid #ff4409;
}

.riocam-lookbook {
    padding: 100px 0 130px;
}

.riocam-lookbook--row {
    display: grid;
    grid-row-gap: 40px;
}

.riocam-lookbook .col-image.small {
    position: relative;
    height: fit-content;
    font-size: 0;
}

.riocam-lookbook.first .col-image.small::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -40px;
    width: 93px;
    height: 1px;
    background: #ff4409;
}

.riocam-info {
    padding: 129px 0 100px;
}

.riocam-info--row {
    display: grid;
    grid-row-gap: 40px;
}

.riocam-info .headline--title {
    position: relative;
}

.riocam-info .headline--title::before {
    content: "";
    position: absolute;
    top: -29px;
    left: 0;
    width: 19px;
    height: 10px;
    background: #ff4409;
}

.riocam-info--paragraph {
    width: 100%;
    padding: 10px 16px;
    border-left: 1px solid #ff4409;
    border-right: 1px solid #ff4409;
}

.riocam-banner-page img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.riocam-banner-page.bottom {
    position: relative;
}

.riocam-banner-page.bottom::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(4, 6, 13, 0.3) 27.65%, #010012 70.21%);
}

.panel:not(.active) .col-image,
.panel:not(.active) .headline--title,
.panel:not(.active) .headline--description,
.panel:not(.active) .col-image,
.panel:not(.active) .col-image {
    opacity: 0;
    transform: translate3d(0, 60px, 0);
}
@media (min-width: 768px) {
    .d-md-none {
        display: none;
    }

    .d-md-block {
        display: block;
    }

    .bertone-x-riocam .banner::after {
        background: linear-gradient(4deg, #040709 25.63%, rgba(40, 36, 32, 0) 55.4%);
    }

    .banner-riocam-heading {
        padding: 10px 16px;
        font-size: 50px;
        line-height: 100%;
        letter-spacing: -0.02em;
    }

    .headline--title {
        font-size: 40px;
        line-height: 110%;
        letter-spacing: 0;
    }

    .riocam-info .headline--title {
        font-size: 50px;
        line-height: 100%;
        letter-spacing: -0.065rem;
    }

    .riocam-about {
        padding: 140px 0 100px;
    }

    .riocam-about--row {
        grid-template-columns: 26% auto;
        grid-row-gap: 34px;
        grid-column-gap: 20px;
    }

    .riocam-about .col-image.small { grid-area: 1 / 1 / 2 / 2; }
    .riocam-about .col-image.large { grid-area: 1 / 2 / 2 / 3; }
    .riocam-about .col-headline { grid-area: 2 / 2 / 3 / 3; margin-bottom: 7px }
    .riocam-about .col-description { grid-area: 3 / 2 / 4 / 3; }

    .riocam-about .col-headline::before {
        right: -1%;
        bottom: 12%;
        width: 107px;
        transform: rotate(138deg);
    }

    .riocam-about .col-image.small img {
        margin-top: 46%;
    }

    .riocam-about .riocam-about--paragraph {
        padding: 11px 0 11px 15px;
    }

    .riocam-lookbook {
        padding: 98px 0 193px;
    }

    .riocam-lookbook--row {
        grid-template-columns: 72.15% auto;
        grid-column-gap: 20px;
    }

    .riocam-lookbook.first .col-image.small::before {
        left: auto;
        right: 0;
        bottom: -14px;
        width: 34px;
    }

    .riocam-info {
        padding: 221px 0 103px;
    }

    .riocam-info--row {
        grid-row-gap: 34px;
    }

    .riocam-info .headline--title::before {
        top: -21px;
    }

    .riocam-info--paragraph {
        width: 53.5%;
        margin-top: -7px;
        padding: 11px;
    }
}

@media (min-width: 992px) {
    .d-lg-none {
        display: none;
    }

    .d-lg-block {
        display: block;
    }

    #panelWrap {
        background: #040709;
    }

    .banner-riocam-heading {
        padding: 10px 16px;
        font-size: 56px;
        line-height: 110%;
    }

    .riocam-about {
        padding: 142px 0 120px;
    }

    .riocam-about--row {
        grid-template-columns: 15.25% 41.2% auto;
        grid-row-gap: 23px;
    }

    .riocam-about .col-image.small { grid-area: 1 / 1 / 2 / 2; }
    .riocam-about .col-image.large { grid-area: 1 / 2 / 2 / 3; }
    .riocam-about .col-headline { grid-area: 1 / 3 / 2 / 4; }
    .riocam-about .col-description { grid-area: 2 / 2 / 3 / 3; }

    .riocam-about .riocam-about--paragraph {
        margin-top: 6px;
    }

    .riocam-lookbook {
        padding: 120px 0 133px;
    }

    .riocam-lookbook--row {
        grid-template-columns: 66.15% 23.7%;
        grid-column-gap: 20px;
    }

    .riocam-lookbook.first .col-image.small::before {
        bottom: -22px;
        width: 54px;
    }

    .riocam-banner-page {
        margin: 104px 0 100px;
    }

    .riocam-info {
        padding: 141px 0 120px;
    }

    .riocam-info .headline--title::before {
        top: -29px;
    }

    .riocam-info--row {
        grid-template-columns: 31.4% 66.1%;
        grid-column-gap: 30px;
        grid-row-gap: 30px;
    }

    .riocam-info .col-headline { grid-area: 1 / 2 / 2 / 3; margin-bottom: 19px}
    .riocam-info .col-image.large { grid-area: 2 / 2 / 3 / 3; }
    .riocam-info .col-image.small { grid-area: 2 / 1 / 3 / 2; }
    .riocam-info .col-description { grid-area: 3 / 2 / 4 / 3; margin-top: 7px }

    .riocam-info .col-image.small img {
        margin-top: 37%;
    }

    .riocam-info .headline--title::before {
        top: 6px;
        left: -39px;
    }

    .riocam-info--paragraph {
        max-width: 497px;
        width: 100%;
        margin-top: -6px;
        padding: 11px 17px;
    }

    .riocam-banner-page.bottom {
        height: auto;
        min-height: auto;
        max-height: 100vh;
        margin: 0;
        padding-top: 52%;
    }
}


@media (min-width: 1180px) {
    .riocam-about--row {
        grid-template-columns: 15.25% 49.2% auto;
    }

    .riocam-about .col-headline::before {
        right: -45%;
        bottom: 41%;
        width: 380px;
        transform: rotate(130deg);
    }
}

@media (max-width: 991px) {
    .bertone-x-riocam .banner .banner-texts {
        padding-bottom: 37px;
    }

    .riocam-about--title {
        max-width: 506px;
    }

    .riocam-about--title br {
        display: none;
    }

    .riocam-about .col-description {
        max-width: 486px;
    }

    .riocam-info--title {
        margin-bottom: 5px;
    }

    .riocam-info .col-image.large img {
        aspect-ratio: 2 / 2.811;
    }

    .riocam-info .col-image.small {
        width: 53.5%;
    }

    .riocam-banner-page {
        padding-top: 83%;
    }

    .riocam-banner-page img {
        object-fit: cover;
        width: 100%;
        height: 100%;
    }

    .riocam-banner-page.bottom {
        padding-top: 52%;
    }
}

@media (max-width: 767px) {
    .bertone-x-riocam .banner::after {
        height: 100%;
        background: linear-gradient(7.04deg, #010012 21.76%, rgba(40, 36, 32, 0) 50.47%);
    }

    .bertone-x-riocam .banner .banner-texts {
        padding-bottom: 70px;
    }

    .riocam-about .riocam-about--paragraph {
        margin-top: 40px;
        padding: 12px 15px;
    }

    .riocam-about .col-image.small img {
        aspect-ratio: 3 / 4.03;
    }

    .riocam-about .col-image.large img {
        aspect-ratio: 2 / 2.425;
    }

    .riocam-about .col-headline {
        padding-right: 16px;
    }

    .riocam-info .col-image.small {
        width: 100%;
    }

    .riocam-info .col-image.small img {
        aspect-ratio: 3 / 5.15;
    }

    .riocam-banner-page {
        margin: 110px 0 100px;
    }

    .riocam-lookbook.second .col-image.small img {
        aspect-ratio: 3 / 1.88;
    }

    .riocam-banner-page.bottom {
        margin: 70px 0 0;
        padding-top: 107%;
    }
}