.roof-tent-landing {
    font-family: "Montserrat", sans-serif;
    max-width: 1500px;
    min-width: 270px;
    width: 100%;
    margin: 0 auto;
}

/* product============================================================================== */
.product-roof {
    display: flex;
    flex-direction: column;
    padding: 60px 60px 100px;
    background-image: url(/image/catalog/landings/roof-tent-r/product-background.webp);
    background-size: cover;
    background-repeat: no-repeat;
    gap: 240px;
}
.product-roof h2 {
    color: #FFF;
    text-align: center;
    font-size: 116px;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
    margin: 0;
}
.product-roof p {
    color: #FFF;
    font-size: 20px;
    font-weight: 400;
    line-height: 140%;
    max-width: 601px;
    align-self: end;
    margin: 0;
}
@media screen and (max-width: 1599px) {
    .product-roof {
        padding: 50px 40px 90px;
        gap: 140px;
    }
    .product-roof h2 {
        font-size: 102px;
    }
    .product-roof p {
        max-width: 541px;
    }
}
@media screen and (max-width: 1344px) {
    .product-roof {
        gap: 155px;
    }
    .product-roof h2 {
        font-size: 90px;
    }
    .product-roof p {
        max-width: 453px;
        font-size: 16px;
    }
}
@media screen and (max-width: 1199px) {
    .product-roof {
        padding: 50px 20px 70px;
        gap: 45px;
    }
    .product-roof h2 {
        font-size: 73px;
    }
    .product-roof p {
        max-width: 408px;
    }
}
@media screen and (max-width: 991px) {
    .product-roof {
        padding: 40px 20px 400px;
        gap: 20px;
        background-image: url(/image/catalog/landings/roof-tent-r/product-background-m.webp);
    }
    .product-roof h2 {
        font-size: 56px;
    }
    .product-roof p {
        max-width: 100%;
        align-self: center;
        text-align: center;
    }
}
@media screen and (max-width: 767px){
    .product-roof {
        padding: 40px 20px 60vw;
    }
    .product-roof h2 {
        font-size: 40px;
    }
    .product-roof p {
        font-size: 14px;
    }
}
@media screen and (max-width: 567px) {
    .product-roof {
        position: relative;
        padding: 24px 12px 90vw;
        background-image: url(/image/catalog/landings/roof-tent-r/product-background-s.webp);
        background-position: center bottom;
        gap: 12px;
    }
    .product-roof::before {
        content: "";
        width: 100%;
        height: 93vw;
        background-image: url(/image/catalog/landings/roof-tent-r/R.svg);
        background-repeat: no-repeat;
        background-size: contain;
        position: absolute;
        top: 0;
        left: 0;
    }
    .product-roof h2 {
        font-size: 34px;
    }
    .product-roof p {
        font-size: 12px;
    }
}
/* materials============================================================================== */
.materials-roof {
    position: relative;
    margin: 200px 0 0 0;
    display: flex;
    flex-direction: column;
    align-items: end;
    gap: 50px;
}
.materials-roof__wrap {
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.materials-roof__wrap img {
    max-width: 600px;
    width: 100%;
}
.materials-roof__info {
    display: flex;
    flex-direction: column;
    gap: 50px;
    max-width: 700px;
    width: 100%;
}
.materials-roof__info h3 {
    color: #266141;
    font-size: 64px;
    font-weight: 800;
    line-height: 120%;
    text-transform: uppercase;
    margin: 0;
}
.materials-roof__info p {
    color: #020A0A;
    font-size: 22px;
    font-weight: 400;
    line-height: 130%;
    margin: 0;
}
.materials-roof__img {
    max-width: 812px;
    width: 100%;
}
.materials-roof::before {
    content: "";
    background-image: url(/image/catalog/landings/roof-tent-r/materials-line.svg);
    background-repeat: no-repeat;
    background-size: contain;
    width: 434px;
    height: 250px;
    position: absolute;
    bottom: 34%;
    left: 22%;
}
@media screen and (max-width: 1599px) {
    .materials-roof {
        margin: 180px 0 0 0;
    }
    .materials-roof__info {
        gap: 30px;
        max-width: 565px;
    }
    .materials-roof__info h3 {
        font-size: 54px;
    }
    .materials-roof__info p {
        font-size: 20px;
    }
    .materials-roof__img {
        max-width: 712px;
    }
    .materials-roof::before {
        height: 211px;
    }
}
@media screen and (max-width: 1344px) {
    .materials-roof {
        margin: 150px 0 0 0;
        gap: 80px;
    }
    .materials-roof__wrap img {
        max-width: 545px;
    }
    .materials-roof__info {
        max-width: 545px;
    }
    .materials-roof__info h3 {
        font-size: 44px;
    }
    .materials-roof__info p {
        font-size: 18px;
    }
    .materials-roof__img {
        max-width: 545px;
    }
    .materials-roof::before {
        width: 345px;
        height: 215px;
        bottom: 28%;
        left: 28%;
    }
}
@media screen and (max-width: 1199px) {
    .materials-roof {
        margin: 120px 0 0 0;
        gap: 0;
    }
    .materials-roof__wrap img {
        max-width: 445px;
    }
    .materials-roof__info {
        max-width: 445px;
        gap: 20px;
    }
    .materials-roof__info h3 {
        font-size: 36px;
    }
    .materials-roof__info p {
        font-size: 16px;
    }
    .materials-roof::before {
        width: 231px;
        height: 130px;
        bottom: 36%;
        left: 25%;
    }
}
@media screen and (max-width: 991px) {
    .materials-roof {
        margin: 100px 0 0 0;
        gap: 30px;
    }
    .materials-roof__wrap img {
        max-width: 340px;
    }
    .materials-roof__info {
        max-width: 340px;
    }
    .materials-roof::before {
        width: 148px;
        height: 103px;
        bottom: 36%;
        left: 21%;
        transform: rotate(30deg);
    }
    .materials-roof__img {
        max-width: 500px;
    }
}
@media screen and (max-width: 767px){
    .materials-roof {
        margin: 80px 0 0 0;
        gap: 30px;
    }
    .materials-roof__wrap {
        gap: 20px;
    }
    .materials-roof__wrap img {
        width: 49vw;
        height: 220px;
        object-fit: cover;
    }
    .materials-roof__info h3 {
        font-size: 22px;
    }
    .materials-roof__info p {
        font-size: 14px;
    }
    .materials-roof::before {
        width: 193px;
        height: 111px;
        bottom: 152px;
        left: 25%;
        transform: rotate(0deg);
    }
    .materials-roof__img {
        max-width: 384px;
    }
}
@media screen and (max-width: 567px) {
    .materials-roof {
        margin: 60px 0 0 0;
        gap: 10px;
    }
    .materials-roof__wrap {
        flex-direction: column;
    }
    .materials-roof__wrap img {
        max-width: 100%;
        width: 100%;
        height: 210px;
    }
    .materials-roof__info {
        max-width: 100%;
        text-align: center;
        gap: 12px;
    }
    .materials-roof__info h3 {
        font-size: 20px;
    }
    .materials-roof__info p {
        font-size: 12px;
    }
    .materials-roof__img {
        max-width: 100%;
    }
    .materials-roof::before {
        content: none;
    }
}
/* convenience================================================================================ */
.convenience-roof {
    background-color: #F9F6F1;
    padding: 50px 0 0 0;
    background-image: url(/image/catalog/landings/roof-tent-r/pattern.svg);
    background-size: contain;
    background-repeat: no-repeat;
    margin: -180px 0 0 0;
}
.convenience-roof__info {
    display: flex;
    flex-direction: column;
    gap: 50px;
    max-width: 700px;
    width: 100%;
    margin: 0 0 0 50px;
}
.convenience-roof__info h3 {
    color: #266141;
    font-size: 64px;
    font-weight: 800;
    line-height: 120%;
    text-transform: uppercase;
    margin: 0;
}
.convenience-roof__info p {
    color: #020A0A;
    font-size: 22px;
    font-weight: 400;
    line-height: 130%;
    margin: 0;
}
.convenience-roof__wrap {
    display: flex;
    justify-content: space-between;
    margin: 150px 0 0 0;
}
.convenience-roof__inner {
    display: flex;
    flex-direction: column;
    gap: 30px;
    max-width: 700px;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}
.convenience-roof__inner h4 {
    color: #020A0A;
    font-size: 52px;
    font-weight: 800;
    line-height: 120%;
    text-transform: uppercase;
    margin: 0;
}
.convenience-roof__inner p {
    color: #020A0A;
    font-size: 20px;
    font-weight: 400;
    line-height: 130%;
    margin: 0;
}
.convenience-roof__inner_1 {
    background-image: url(/image/catalog/landings/roof-tent-r/hardtop.webp);
    background-position: bottom right;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 50px 50px 400px 50px;
}
.convenience-roof__inner_2 {
    text-align: end;
    background-image: url(/image/catalog/landings/roof-tent-r/rain-protection.webp);
    background-position: bottom left;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 50px 50px 418px 50px;
    margin: 100px 0 0 0;
}
@media screen and (max-width: 1599px) {
    .convenience-roof {
        padding: 40px 0 0 0;
    }
    .convenience-roof__info {
        gap: 30px;
        margin: 0 0 0 40px;
        max-width: 565px;
    }
    .convenience-roof__info h3 {
        font-size: 54px;
    }
    .convenience-roof__info p {
        font-size: 20px;
    }
    .convenience-roof__wrap {
        margin: 140px 0 0 0;
        gap: 40px;
    }
    .convenience-roof__inner {
        max-width: 605px;
    }
    .convenience-roof__inner h4 {
        font-size: 42px;
    }
    .convenience-roof__inner_1 {
        padding: 40px 40px 303px 40px;
    }
    .convenience-roof__inner_2 {
        padding: 40px 40px 357px 40px;
        margin: 84px 0 0 0;
    }
}
@media screen and (max-width: 1344px) {
    .convenience-roof__info {
        max-width: 505px;
    }
    .convenience-roof__info h3 {
        font-size: 38px;
    }
    .convenience-roof__info p {
        font-size: 18px;
    }
    .convenience-roof__wrap {
        gap: 30px;
    }
    .convenience-roof__inner {
        max-width: 545px;
    }
    .convenience-roof__inner h4 {
        font-size: 38px;
    }
    .convenience-roof__inner p {
        font-size: 18px;
    }
    .convenience-roof__inner_1 {
        padding: 40px 40px 328px 40px;
    }
    .convenience-roof__inner_2 {
        padding: 40px 40px 374px 40px;
    }
}
@media screen and (max-width: 1199px) {
    .convenience-roof__info {
        max-width: 415px;
        gap: 20px;
        margin: 0 0 0 30px;
    }
    .convenience-roof__info h3 {
        font-size: 30px;
    }
    .convenience-roof__info p {
        font-size: 16px;
    }
    .convenience-roof__wrap {
        margin: 90px 0 0 0;
    }
    .convenience-roof__inner {
        max-width: 445px;
    }
    .convenience-roof__inner h4 {
        font-size: 30px;
    }
    .convenience-roof__inner p {
        font-size: 16px;
    }
    .convenience-roof__inner_1 {
        padding: 40px 40px 216px 40px;
    }
    .convenience-roof__inner_2 {
        padding: 40px 40px 264px 40px;
        margin: 77px 0 0 0;
    }
}
@media screen and (max-width: 991px) {
    .convenience-roof {
        padding: 213px 0 0 0;
        margin: -180px 0 0 0;
    }
    .convenience-roof__info {
        max-width: 100%;
        margin: 0;
        padding: 0 20px;
        box-sizing: border-box;
    }
    .convenience-roof__wrap {
        margin: 60px 0 0 0;
        gap: 20px;
    }
    .convenience-roof__inner {
        max-width: 340px;
        gap: 20px;
        box-sizing: border-box;
    }
    .convenience-roof__inner_1 {
        padding: 20px 20px 159px 20px;
        background-image: url(/image/catalog/landings/roof-tent-r/hardtop-m.webp);
    }
    .convenience-roof__inner_2 {
        padding: 20px 20px 207px 20px;
        background-image: url(/image/catalog/landings/roof-tent-r/rain-protection-m.webp);
        margin: 80px 0 0 0;
    }
}
@media screen and (max-width: 767px){
    .convenience-roof {
        padding: 164px 0 0 0;
        margin: -135px 0 0 0;
    }
    .convenience-roof__info h3 {
        font-size: 22px;
    }
    .convenience-roof__info p {
        font-size: 14px;
    }
    .convenience-roof__wrap {
        margin: 60px 0 0 0;
        gap: 18px;
    }
    .convenience-roof__inner h4 {
        font-size: 18px;
    }
    .convenience-roof__inner p {
        font-size: 12px;
    }
    .convenience-roof__inner_2 {
        margin: 60px 0 0 0;
    }
}
@media screen and (max-width: 567px) {
    .convenience-roof {
        padding: 45vw 0 0 0;
        margin: -37vw 0 0 0;
    }
    .convenience-roof__wrap {
        flex-direction: column;
    }
    .convenience-roof__info {
        padding: 0 12px;
        text-align: center;
    }
    .convenience-roof__info h3 {
        font-size: 20px;
    }
    .convenience-roof__info p {
        font-size: 12px;
    }
    .convenience-roof__inner {
        max-width: 100%;
        text-align: center;
        gap: 12px;
    }
    .convenience-roof__inner h4 {
        font-size: 20px;
    }
    .convenience-roof__inner_1 {
        padding: 20px 20px 42vw 20px;
    }
    .convenience-roof__inner_2 {
        padding: 20px 20px 52vw 20px;
        margin: 0;
    }
}
/* installation=================================================================== */
.installation-roof {
    background-image: url(/image/catalog/landings/roof-tent-r/installation.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom center;
    padding: 547px 0 1000px;
    display: flex;
    justify-content: center;
    margin: -250px 0 200px 0;
}
.installation-roof__info {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 30px;
    max-width: 982px;
    width: 100%;
}
.installation-roof__info h3 {
    color: #266141;
    font-size: 64px;
    font-weight: 800;
    line-height: 120%;
    text-transform: uppercase;
    margin: 0;
}
.installation-roof__info h5 {
    color: #020A0A;
    font-size: 22px;
    font-weight: 700;
    line-height: 130%;
    margin: 0;
}
.installation-roof__info p {
    color: #020A0A;
    font-size: 22px;
    font-weight: 400;
    line-height: 130%;
    margin: 0;
}
@media screen and (max-width: 1599px) {
    .installation-roof {
        padding: 350px 0 820px;
        margin: -150px 0 180px 0;
    }
    .installation-roof__info h3 {
        font-size: 54px;
    }
    .installation-roof__info p {
        font-size: 20px;
    }
}
@media screen and (max-width: 1344px) {
    .installation-roof {
        padding: 350px 0 760px;
        margin: -150px 0 150px 0;
    }
    .installation-roof__info h3 {
        font-size: 44px;
    }
    .installation-roof__info h5 {
        font-size: 18px;
    }
    .installation-roof__info p {
        font-size: 18px;
    }
}
@media screen and (max-width: 1199px) {
    .installation-roof {
        padding: 200px 0 630px;
        margin: -50px 0 100px 0;
    }
    .installation-roof__info {
        max-width: 860px;
        gap: 20px;
    }
    .installation-roof__info h3 {
        font-size: 36px;
    }
    .installation-roof__info p {
        font-size: 16px;
    }
}
@media screen and (max-width: 991px) {
    .installation-roof {
        padding: 150px 0 430px;
        margin: -50px 0 100px 0;
    }
    .installation-roof__info {
        max-width: 660px;
    }
}
@media screen and (max-width: 767px){
    .installation-roof {
        padding: 140px 0 430px;
        margin: -60px 0 80px 0;
    }
    .installation-roof__info {
        padding: 0 20px;
    }
}
@media screen and (max-width: 567px) {
    .installation-roof {
        padding: 60px 0 300px;
        margin: 0 0 60px 0;
    }
    .installation-roof__info {
        padding: 0 12px;
        gap: 12px;
    }
    .installation-roof__info h3 {
        font-size: 20px;
    }
    .installation-roof__info h5 {
        font-size: 14px;
    }
    .installation-roof__info p {
        font-size: 12px;
    }
}
/* advantages======================================================================== */
.advantages-roof {
    margin: 0 0 200px 0;
    position: relative;
    height: 4300px;
}
.advantages-roof ol {
    position: sticky;
    left: 0;
    top: 80px;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: end;
}
.lights-roof {
    padding: 40px;
    box-sizing: border-box;
    min-height: 910px;
    background: linear-gradient(90deg, rgba(91, 103, 112, 0.20) 0.41%, rgba(91, 103, 112, 0.10) 99.57%);
}
.lights-roof__info {
    display: flex;
    gap: 65px;
    padding: 40px 0 0 30px;
}
.lights-roof__info b {
    color: #5B6770;
    text-align: center;
    font-size: 100px;
    font-weight: 800;
    line-height: 50%;
    text-transform: uppercase;
    margin: 0;
}
.lights-roof__text {
    max-width: 860px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 65px;
}
.lights-roof__text h4 {
    color: #22372C;
    font-size: 45px;
    font-weight: 800;
    line-height: 100%;
    text-transform: uppercase;
    margin: 0;
}
.lights-roof__text p {
    color: #020A0A;
    font-size: 22px;
    font-weight: 400;
    line-height: 130%;
    margin: 0;
}
.lights-roof__inner {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    margin: 25px 0 0 0;
}
.lights-roof__img_1 {
    width: 792px;
}
.lights-roof__img_2 {
    width: 538px;
}
@media screen and (max-width: 1599px) {
    .advantages-roof {
        margin: 0 0 180px 0;
        height: 4000px;
    }
    .lights-roof__info {
        gap: 65px;
        padding: 25px 0 0 10px;
    }
    .lights-roof__info b {
        font-size: 90px;
    }
    .lights-roof__text {
        max-width: 990px;
        gap: 75px;
    }
    .lights-roof__text h4 {
        font-size: 36px;
    }
    .lights-roof__text p {
        font-size: 20px;
    }
    .lights-roof__inner {
        margin: 60px 0 0 0;
    }
    .lights-roof__img_1 {
        width: 605px;
        object-fit: cover;
    }
    .lights-roof__img_2 {
        width: 525px;
    }
}
@media screen and (max-width: 1344px) {
    .advantages-roof ol {
        top: 50px;
    }
    .advantages-roof {
        margin: 0 0 150px 0;
        height: 3400px;
    }
    .lights-roof {
        min-height: 700px;
    }
    .lights-roof__info {
        padding: 10px 0 0 10px;
    }
    .lights-roof__info b {
        font-size: 70px;
    }
    .lights-roof__text {
        max-width: 720px;
        gap: 47px;
    }
    .lights-roof__text h4 {
        font-size: 30px;
    }
    .lights-roof__text p {
        font-size: 16px;
    }
    .lights-roof__inner {
        margin: 64px 0 0 0;
    }
    .lights-roof__img {
        height: 385px;
    }
    .lights-roof__img_1 {
        width: 535px;
    }
    .lights-roof__img_2 {
        width: 465px;
    }
}
@media screen and (max-width: 1199px) {
    .advantages-roof {
        height: 3000px;
    }
    .lights-roof {
        padding: 30px;
        min-height: 656px;
    }
    .lights-roof__info {
        padding: 10px 0 0 10px;
    }
    .lights-roof__inner {
        margin: 40px 0 0 0;
        gap: 30px;
    }
    .lights-roof__img_1 {
        width: 445px;
    }
    .lights-roof__img_2 {
        width: 385px;
    }
}
@media screen and (max-width: 991px) {
    .advantages-roof {
        margin: 0 0 100px 0;
        height: auto;
    }
    .advantages-roof ol {
        position: static;
        gap: 20px;
    }
    .lights-roof {
        padding: 20px;
        min-height: 588px;
    }
    .lights-roof__info {
        padding: 30px 0 0 0;
        position: relative;
    }
    .lights-roof__info b {
        position: absolute;
        top: 25px;
        left: 25px;
    }
    .lights-roof__text h4 {
        align-self: end;
        width: 520px;
    }
    .lights-roof__text p {
        text-align: center;
    }
    .lights-roof__inner {
        margin: 57px 0 0 0;
        gap: 22px;
    }
    .lights-roof__img {
        height: 300px;
    }
    .lights-roof__img_1 {
        width: 342px;
    }
    .lights-roof__img_2 {
        width: 296px;
    }
}
@media screen and (max-width: 767px){
    .advantages-roof {
        margin: 0 0 80px 0;
    }
    .lights-roof {
        min-height: 550px;
    }
    .lights-roof__info {
        padding: 20px 0 0 0;
    }
    .lights-roof__text h4 {
        align-self: start;
        padding: 0 0 0 140px;
        width: 338px;
        font-size: 22px;
    }
    .lights-roof__text p {
        font-size: 14px;
    }
    .lights-roof__inner {
        margin: 88px 0 0 0;
        gap: 16px;
    }
    .lights-roof__img {
        height: 220px;
    }
    .lights-roof__img_1 {
        width: 100%;
        max-width: 52%;
    }
    .lights-roof__img_2 {
        width: 100%;
        max-width: 44%;
    }
}
@media screen and (max-width: 567px) {
    .advantages-roof {
        margin: 0 0 60px 0;
    }
    .advantages-roof ol {
        gap: 18px;
    }
    .lights-roof {
        padding: 12px;
    }
    .lights-roof__info {
        flex-direction: column;
        gap: 25px;
    }
    .lights-roof__info b {
        position: static;
        font-size: 50px;
    }
    .lights-roof__text {
        gap: 20px;
    }
    .lights-roof__text h4 {
        align-self: center;
        text-align: center;
        padding: 0;
        width: 100%;
        font-size: 14px;
    }
    .lights-roof__text p {
        font-size: 12px;
    }
    .lights-roof__inner {
        margin: 50px 0 0 0;
        gap: 12px;
        flex-direction: column;
    }
    .lights-roof__img_1 {
        max-width: 100%;
    }
    .lights-roof__img_2 {
        max-width: 100%;
        object-fit: cover;
    }
}
/* 2========================================== */
.mat-roof {
    max-width: 1208px;
    width: 100%;
    background: linear-gradient(90deg, #C5C8CB 0.1%, #D1D5DA 99.91%);
    box-shadow: -5px 0px 12px 0px rgba(91, 103, 112, 0.20);
    padding: 40px;
    box-sizing: border-box;
    min-height: 910px;
}
.mat-roof__info {
    display: flex;
    gap: 65px;
    padding: 40px 0 0 30px;
}
.mat-roof__info b {
    color: #5B6770;
    text-align: center;
    font-size: 100px;
    font-weight: 800;
    line-height: 50%;
    text-transform: uppercase;
    margin: 0;
}
.mat-roof__text {
    max-width: 805px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 65px;
}
.mat-roof__text h4 {
    color: #22372C;
    font-size: 45px;
    font-weight: 800;
    line-height: 100%;
    text-transform: uppercase;
    margin: 0;
}
.mat-roof__text p {
    color: #020A0A;
    font-size: 22px;
    font-weight: 400;
    line-height: 130%;
    margin: 0;
}
.mat-roof__inner {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    margin: 83px 0 0 0;
}
.mat-roof__img_1 {
    width: 700px;
    object-fit: cover;
}
.mat-roof__img_2 {
    width: 388px;
    object-fit: cover;
}
@media screen and (max-width: 1599px) {
    .mat-roof {
        max-width: 1040px;
    }
    .mat-roof__info {
        gap: 45px;
        padding: 25px 0 0 10px;
    }
    .mat-roof__info b {
        font-size: 90px;
    }
    .mat-roof__text {
        max-width: 780px;
        gap: 76px;
    }
    .mat-roof__text h4 {
        font-size: 36px;
    }
    .mat-roof__text p {
        font-size: 20px;
    }
    .mat-roof__inner {
        margin: 180px 0 0 0;
    }
    .mat-roof__img_1 {
        width: 590px;
    }
    .mat-roof__img_2 {
        width: 330px;
    }
}
@media screen and (max-width: 1344px) {
    .mat-roof {
        max-width: 950px;
        min-height: 700px;
    }
    .mat-roof__info {
        padding: 10px 0 0 10px;
    }
    .mat-roof__info b {
        font-size: 70px;
    }
    .mat-roof__text {
        max-width: 550px;
        gap: 54px;
    }
    .mat-roof__text h4 {
        font-size: 30px;
    }
    .mat-roof__text p {
        font-size: 20px;
    }
    .mat-roof__inner {
        margin: 137px 0 0 0;
    }
    .mat-roof__img {
        height: 310px;
    }
    .mat-roof__img_1 {
        width: 543px;
    }
    .mat-roof__img_2 {
        width: 297px;
    }
}
@media screen and (max-width: 1199px) {
    .mat-roof {
        max-width: 750px;
        min-height: 656px;
        padding: 30px;
    }
    .mat-roof__info {
        padding: 10px 0 0 10px;
    }
    .mat-roof__text {
        gap: 34px;
    }
    .mat-roof__inner {
        margin: 130px 0 0 0;
    }
    .mat-roof__img_1 {
        width: 407px;
    }
    .mat-roof__img_2 {
        width: 243px;
    }
}
@media screen and (max-width: 991px) {
    .mat-roof {
        padding: 20px;
        min-height: 588px;
    }
    .mat-roof__info {
        padding: 13px 0 0 0;
        position: relative;
    }
    .mat-roof__info b {
        position: absolute;
        top: 25px;
        left: 25px;
    }
    .mat-roof__text {
        max-width: 100%;
        gap: 50px;
    }
    .mat-roof__text h4 {
        align-self: end;
        width: 500px;
    }
    .mat-roof__text p {
        text-align: center;
        font-size: 16px;
    }
    .mat-roof__inner {
        margin: 82px 0 0 0;
        gap: 22px;
    }
    .mat-roof__img {
        height: 300px;
    }
    .mat-roof__img_1 {
        width: 420px;
    }
    .mat-roof__img_2 {
        width: 220px;
    }
}
@media screen and (max-width: 767px){
    .mat-roof {
        min-height: 550px;
    }
    .mat-roof__info {
        padding: 20px 0 0 0;
    }
    .mat-roof__text {
        gap: 56px;
    }
    .mat-roof__text h4 {
        align-self: start;
        padding: 0 0 0 140px;
        width: 338px;
        font-size: 22px;
    }
    .mat-roof__text p {
        font-size: 14px;
    }
    .mat-roof__inner {
        margin: 133px 0 0 0;
        gap: 16px;
    }
    .mat-roof__img {
        height: 220px;
    }
    .mat-roof__img_1 {
        width: 100%;
        max-width: 60%;
    }
    .mat-roof__img_2 {
        width: 100%;
        max-width: 36%;
    }
}
@media screen and (max-width: 567px) {
    .mat-roof {
        padding: 12px;
    }
    .mat-roof__info {
        flex-direction: column;
        gap: 25px;
    }
    .mat-roof__info b {
        position: static;
        font-size: 50px;
    }
    .mat-roof__text {
        gap: 20px;
    }
    .mat-roof__text h4 {
        align-self: center;
        text-align: center;
        padding: 0;
        width: 100%;
        font-size: 14px;
    }
    .mat-roof__text p {
        font-size: 12px;
    }
    .mat-roof__inner {
        margin: 50px 0 0 0;
        gap: 12px;
        flex-direction: column;
    }
    .mat-roof__img_1 {
        max-width: 100%;
    }
    .mat-roof__img_2 {
        max-width: 100%;
    }
}
/* 3========================================== */
.accessories-roof {
    max-width: 966px;
    width: 100%;
    background: linear-gradient(90deg, #BCC3C9 0.1%, #D0D8E0 99.91%);
    box-shadow: -5px 0px 12px 0px rgba(91, 103, 112, 0.20);
    padding: 40px;
    margin: 0;
    box-sizing: border-box;
    min-height: 910px;
}
.accessories-roof__info {
    display: flex;
    gap: 65px;
    padding: 25px 0 0 30px;
}
.accessories-roof__info b {
    color: #5B6770;
    text-align: center;
    font-size: 100px;
    font-weight: 800;
    line-height: 85%;
    text-transform: uppercase;
    margin: 0;
}
.accessories-roof__text {
    max-width: 680px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 65px;
}
.accessories-roof__text h4 {
    color: #22372C;
    font-size: 45px;
    font-weight: 800;
    line-height: 100%;
    text-transform: uppercase;
    margin: 0;
}
.accessories-roof__text p {
    color: #020A0A;
    font-size: 20px;
    font-weight: 400;
    line-height: 130%;
    margin: 0;
}
.accessories-roof__inner {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    margin: 32px 0 0 0;
}
.accessories-roof__img_1 {
    width: 544px;
    object-fit: cover;
}
.accessories-roof__img_2 {
    width: 302px;
    object-fit: cover;
}
@media screen and (max-width: 1599px) {
    .accessories-roof {
        max-width: 830px;
    }
    .accessories-roof__info {
        gap: 45px;
        padding: 8px 0 0 12px;
    }
    .accessories-roof__info b {
        font-size: 90px;
    }
    .accessories-roof__text {
        max-width: 780px;
        gap: 58px;
    }
    .accessories-roof__text h4 {
        font-size: 36px;
    }
    .accessories-roof__text p {
        font-size: 20px;
    }
    .accessories-roof__inner {
        margin: 132px 0 0 0;
    }
    .accessories-roof__img_1 {
        width: 460px;
    }
    .accessories-roof__img_2 {
        width: 250px;
    }
}
@media screen and (max-width: 1344px) {
    .accessories-roof {
        max-width: 780px;
        min-height: 700px;
    }
    .accessories-roof__info {
        padding: 0 0 0 10px;
    }
    .accessories-roof__info b {
        font-size: 70px;
    }
    .accessories-roof__text {
        max-width: 550px;
        gap: 36px;
    }
    .accessories-roof__text h4 {
        font-size: 30px;
    }
    .accessories-roof__text p {
        font-size: 20px;
    }
    .accessories-roof__inner {
        margin: 110px 0 0 0;
    }
    .accessories-roof__img {
        height: 310px;
    }
    .accessories-roof__img_1 {
        width: 420px;
    }
    .accessories-roof__img_2 {
        width: 240px;
    }
}
@media screen and (max-width: 1199px) {
    .accessories-roof {
        max-width: 580px;
        min-height: 656px;
        padding: 30px;
    }
    .accessories-roof__info {
        padding: 0 0 0 10px;
    }
    .accessories-roof__text {
        gap: 16px;
        max-width: 370px;
    }
    .accessories-roof__inner {
        margin: 54px 0 0 0;
        gap: 30px;
    }
    .accessories-roof__img_1 {
        width: 315px;
    }
    .accessories-roof__img_2 {
        width: 175px;
    }
}
@media screen and (max-width: 991px) {
    .accessories-roof {
        padding: 20px;
        min-height: 588px;
        max-width: 100%;
    }
    .accessories-roof__info {
        padding: 13px 0 0 0;
        position: relative;
    }
    .accessories-roof__info b {
        position: absolute;
        top: 25px;
        left: 25px;
        line-height: 50%;
    }
    .accessories-roof__text {
        max-width: 100%;
        gap: 50px;
    }
    .accessories-roof__text h4 {
        align-self: end;
        width: 500px;
    }
    .accessories-roof__text p {
        text-align: center;
        font-size: 16px;
    }
    .accessories-roof__inner {
        margin: 62px 0 0 0;
        gap: 22px;
    }
    .accessories-roof__img {
        height: 300px;
    }
    .accessories-roof__img_1 {
        width: 220px;
    }
    .accessories-roof__img_2 {
        width: 420px;
        object-fit: fill;
    }
}
@media screen and (max-width: 767px){
    .accessories-roof {
        min-height: 550px;
    }
    .accessories-roof__info {
        padding: 20px 0 0 0;
    }
    .accessories-roof__info b {
        line-height: 50%;
    }
    .accessories-roof__text {
        gap: 56px;
    }
    .accessories-roof__text h4 {
        align-self: start;
        padding: 0 0 0 140px;
        width: 338px;
        font-size: 22px;
    }
    .accessories-roof__text p {
        font-size: 14px;
    }
    .accessories-roof__inner {
        margin: 115px 0 0 0;
        gap: 16px;
    }
    .accessories-roof__img {
        height: 220px;
    }
    .accessories-roof__img_1 {
        width: 100%;
        max-width: 36%;
    }
    .accessories-roof__img_2 {
        width: 100%;
        max-width: 60%;
    }
}
@media screen and (max-width: 567px) {
    .accessories-roof {
        padding: 12px;
    }
    .accessories-roof__info {
        flex-direction: column;
        gap: 25px;
    }
    .accessories-roof__info b {
        position: static;
        font-size: 50px;
    }
    .accessories-roof__text {
        gap: 20px;
    }
    .accessories-roof__text h4 {
        align-self: center;
        text-align: center;
        padding: 0;
        width: 100%;
        font-size: 14px;
    }
    .accessories-roof__text p {
        font-size: 12px;
    }
    .accessories-roof__inner {
        margin: 50px 0 0 0;
        gap: 12px;
        flex-direction: column;
    }
    .accessories-roof__img_1 {
        max-width: 100%;
    }
    .accessories-roof__img_2 {
        max-width: 100%;
    }
}
/* 4========================================== */
.ladder-roof {
    max-width: 724px;
    width: 100%;
    background: linear-gradient(90deg, #B0B9C2 0.1%, #C5CCD3 99.91%);
    box-shadow: -5px 0px 12px 0px rgba(91, 103, 112, 0.20);
    padding: 40px;
    margin: 0;
    box-sizing: border-box;
    min-height: 910px;
}
.ladder-roof__info {
    display: flex;
    gap: 55px;
    padding: 20px 0 0 0;
}
.ladder-roof__info b {
    color: #5B6770;
    text-align: center;
    font-size: 100px;
    font-weight: 800;
    line-height: 90%;
    text-transform: uppercase;
    margin: 0;
}
.ladder-roof__text {
    max-width: 450px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.ladder-roof__text h4 {
    color: #22372C;
    font-size: 45px;
    font-weight: 800;
    line-height: 100%;
    text-transform: uppercase;
    margin: 0;
}
.ladder-roof__text p {
    color: #020A0A;
    font-size: 20px;
    font-weight: 400;
    line-height: 130%;
    margin: 0;
}
.ladder-roof__inner {
    display: flex;
    justify-content: space-between;
    margin: 37px 0 0 0;
}
.ladder-roof__img {
    width: 100%;
    object-fit: cover;
}
@media screen and (max-width: 1599px) {
    .ladder-roof {
        max-width: 620px;
    }
    .ladder-roof__info {
        gap: 45px;
        padding: 8px 0 0 10px;
    }
    .ladder-roof__info b {
        font-size: 90px;
    }
    .ladder-roof__text {
        max-width: 370px;
        gap: 58px;
    }
    .ladder-roof__text h4 {
        font-size: 36px;
    }
    .ladder-roof__text p {
        font-size: 20px;
    }
    .ladder-roof__inner {
        margin: 110px 0 0 0;
    }
}
@media screen and (max-width: 1344px) {
    .ladder-roof {
        max-width: 610px;
        min-height: 700px;
    }
    .ladder-roof__info {
        padding: 0 0 0 10px;
        gap: 40px;
    }
    .ladder-roof__info b {
        font-size: 70px;
    }
    .ladder-roof__text {
        max-width: 380px;
        gap: 36px;
    }
    .ladder-roof__text h4 {
        font-size: 30px;
    }
    .ladder-roof__text p {
        font-size: 20px;
    }
    .ladder-roof__inner {
        margin: 84px 0 0 0;
    }
    .ladder-roof__img {
        height: 310px;
    }
}
@media screen and (max-width: 1199px) {
    .ladder-roof {
        max-width: 410px;
        min-height: 656px;
        padding: 30px;
    }
    .ladder-roof__info {
        padding: 0 0 0 10px;
        flex-direction: column;
        gap: 25px;
    }
    .ladder-roof__info b {
        text-align: start;
    }
    .ladder-roof__text {
        gap: 16px;
        max-width: 370px;
    }
    .ladder-roof__inner {
        margin: 48px 0 0 0;
    }
    .ladder-roof__img {
        height: 254px;
    }
}
@media screen and (max-width: 991px) {
    .ladder-roof {
        padding: 20px;
        min-height: 588px;
        max-width: 100%;
    }
    .ladder-roof__info {
        padding: 13px 0 0 0;
        position: relative;
    }
    .ladder-roof__info b {
        position: absolute;
        top: 25px;
        left: 25px;
        line-height: 50%;
    }
    .ladder-roof__text {
        max-width: 100%;
        gap: 50px;
    }
    .ladder-roof__text h4 {
        width: 338px;
        padding: 0 0 0 155px;
    }
    .ladder-roof__text p {
        text-align: center;
        font-size: 16px;
    }
    .ladder-roof__inner {
        margin: 83px 0 0 0;
    }
    .ladder-roof__img {
        height: 300px;
    }
}
@media screen and (max-width: 767px){
    .ladder-roof {
        min-height: 550px;
    }
    .ladder-roof__info {
        padding: 20px 0 0 0;
    }
    .ladder-roof__info b {
        line-height: 50%;
    }
    .ladder-roof__text {
        gap: 56px;
    }
    .ladder-roof__text h4 {
        align-self: start;
        padding: 0 0 0 140px;
        width: 338px;
        font-size: 22px;
    }
    .ladder-roof__text p {
        font-size: 14px;
    }
    .ladder-roof__inner {
        margin: 53px 0 0 0;
    }
    .ladder-roof__img {
        height: 300px;
    }
}
@media screen and (max-width: 567px) {
    .ladder-roof {
        padding: 12px;
    }
    .ladder-roof__info {
        flex-direction: column;
        gap: 25px;
    }
    .ladder-roof__info b {
        position: static;
        font-size: 50px;
        text-align: center;
    }
    .ladder-roof__text {
        gap: 20px;
    }
    .ladder-roof__text h4 {
        align-self: center;
        text-align: center;
        padding: 0;
        width: 100%;
        font-size: 14px;
    }
    .ladder-roof__text p {
        font-size: 12px;
    }
    .ladder-roof__inner {
        margin: 50px 0 0 0;
    }
    .ladder-roof__img {
        height: 448px;
    }
}
/* overnight============================================================ */
.overnight-roof {
    display: flex;
    flex-direction: column;
}
.overnight-roof img {
    max-width: 705px;
    width: 100%;
    height: 100%;
}
.overnight-roof__wrap {
    display: flex;
    justify-content: space-between;
}
.overnight-roof__info {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 0 50px 50px 50px;
    max-width: 745px;
    width: 100%;
    height: auto;
    box-sizing: border-box;
}
.overnight-roof__info_2 {
    padding: 50px 50px 0;
    align-self: end;
    margin: -150px 0 0 0;
}
.overnight-roof__info h3 {
    color: #266141;
    font-size: 42px;
    font-weight: 800;
    line-height: 120%;
    text-transform: uppercase;
    margin: 0;
}
.overnight-roof__info p {
    color: #5B6770;
    font-size: 20px;
    font-weight: 400;
    line-height: 130%;
    margin: 0;
}
@media screen and (max-width: 1599px) {
    .overnight-roof img {
        max-width: 605px;
        margin: 40px 0 0 0;
    }
    .overnight-roof__info {
        padding: 0 40px 40px 40px;
        max-width: 645px;
    }
    .overnight-roof__info_2 {
        padding: 40px 40px 0;
        margin: -120px 0 0 0;
    }
}
@media screen and (max-width: 1344px) {
    .overnight-roof img {
        max-width: 545px;
        margin: 0;
    }
    .overnight-roof__info {
        padding: 0 40px 40px 30px;
        max-width: 575px;
    }
    .overnight-roof__info_2 {
        padding: 40px 40px 0 30px;
        margin: -80px 0 0 0;
    }
    .overnight-roof__info h3 {
        font-size: 38px;
    }
    .overnight-roof__info p {
        font-size: 18px;
    }
}
@media screen and (max-width: 1199px) {
    .overnight-roof img {
        max-width: 445px;
    }
    .overnight-roof__info {
        padding: 0 30px 30px 30px;
        max-width: 445px;
    }
    .overnight-roof__info_2 {
        padding: 30px 30px 0 30px;
        margin: 0;
    }
    .overnight-roof__info h3 {
        font-size: 30px;
    }
    .overnight-roof__info p {
        font-size: 16px;
    }
}
@media screen and (max-width: 991px) {
    .overnight-roof img {
        max-width: 340px;
        align-self: end;
    }
    .overnight-roof__info {
        padding: 0 0 20px 20px;
        max-width: 360px;
    }
    .overnight-roof__info_2 {
        padding: 20px 0 0 20px;
    }
}
@media screen and (max-width: 767px){
    .overnight-roof {
        gap: 40px;
    }
    .overnight-roof__wrap {
        flex-direction: column-reverse;
        align-items: center;
        gap: 30px;
    }
    .overnight-roof img {
        max-width: 100%;
        align-self: center;
    }
    .overnight-roof__info {
        padding: 0;
        max-width: 100%;
        text-align: center;
    }
    .overnight-roof__info_2 {
        padding: 0 20px;
    }
    .overnight-roof__info p {
        font-size: 14px;
    }
}
@media screen and (max-width: 567px) {
    .overnight-roof {
        gap: 20px;
    }
    .overnight-roof__wrap {
        gap: 20px;
    }
    .overnight-roof__info {
        gap: 12px;
    }
    .overnight-roof__info_2 {
        padding: 0;
    }
    .overnight-roof__info h3 {
        font-size: 20px;
    }
    .overnight-roof__info p {
        font-size: 12px;
    }
}
/* design======================================================================= */
.design-roof {
    background-color: #F7F7F8;
    padding: 428px 45px 200px;
    background-image: url(/image/catalog/landings/roof-tent-r/pattern.svg);
    background-repeat: no-repeat;
    background-size: contain;
    margin: -170px 0 0 0;
}
.design-roof__wrap {
    display: flex;
    gap: 30px;
}
.design-roof__inner {
    display: grid;
}
.design-roof__inner_1 {
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
.design-roof__img_1 {
    grid-area: 1 / 1 / 2 / 2;
    max-width: 200px;
}
.design-roof__img_2 {
    grid-area: 1 / 2 / 2 / 4;
    max-width: 445px;
}
.design-roof__info {
    display: flex;
    flex-direction: column;
    gap: 30px;
    grid-area: 2 / 1 / 3 / 4;
}
.design-roof__info h2 {
    color: #266141;
    font-size: 64px;
    font-weight: 800;
    line-height: 120%;
    text-transform: uppercase;
    margin: 0;
}
.design-roof__info p {
    color: #020A0A;
    font-size: 22px;
    font-weight: 400;
    line-height: 130%;
    margin: 0;
}
.design-roof__inner_2 {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}
.design-roof__img_3 {
    grid-area: 1 / 1 / 2 / 3;
    max-width: 645px;
}
.design-roof__img_4 {
    grid-area: 2 / 1 / 3 / 2;
    max-width: 290px;
}
.design-roof__img_5 {
    grid-area: 2 / 2 / 3 / 3;
    max-width: 325px;
}

@media screen and (max-width: 1599px) {
    .design-roof {
        padding: 428px 0 100px;
        margin: -160px 0 0 0;
    }
    .design-roof__wrap {
        gap: 40px;
    }
    .design-roof__inner_1 {
        gap: 40px;
    }
    .design-roof__img {
        height: 100%;
        object-fit: cover;
    }
    .design-roof__img_1 {
        max-width: 188px;
        height: 188px;
    }
    .design-roof__img_2 {
        max-width: 416px;
        height: 188px;
    }
    .design-roof__info {
        gap: 30px;
    }
    .design-roof__info h2 {
        font-size: 42px;
    }
    .design-roof__info p {
        font-size: 20px;
    }
    .design-roof__inner_2 {
        gap: 40px;
    }
    .design-roof__img_3 {
        max-width: 566px;
        height: 188px;
    }
    .design-roof__img_4 {
        max-width: 244px;
    }
    .design-roof__img_5 {
        max-width: 282px;
    }
}
@media screen and (max-width: 1344px) {
    .design-roof {
        padding: 308px 0 100px;
        margin: -140px 0 0 0;
    }
    .design-roof__wrap {
        gap: 30px;
    }
    .design-roof__inner_1 {
        gap: 30px;
    }
    .design-roof__img_1 {
        max-width: 160px;
    }
    .design-roof__img_2 {
        max-width: 355px;
    }
    .design-roof__info h2 {
        font-size: 38px;
    }
    .design-roof__info p {
        font-size: 18px;
    }
    .design-roof__inner_2 {
        gap: 30px;
    }
    .design-roof__img_3 {
        max-width: 545px;
    }
    .design-roof__img_4 {
        max-width: 239px;
    }
    .design-roof__img_5 {
        max-width: 276px;
    }
}
@media screen and (max-width: 1199px) {
    .design-roof {
        padding: 230px 0 100px;
        margin: -125px 0 0 0;
    }
    .design-roof__wrap {
        padding: 0 30px;
    }
    .design-roof__img_1 {
        max-width: 119px;
        height: 140px;
    }
    .design-roof__img_2 {
        max-width: 266px;
        height: 140px;
    }
    .design-roof__info h2 {
        font-size: 30px;
    }
    .design-roof__info p {
        font-size: 14px;
    }
    .design-roof__img_3 {
        max-width: 415px;
        height: 140px;
    }
    .design-roof__img_4 {
        max-width: 180px;
    }
    .design-roof__img_5 {
        max-width: 205px;
    }
}
@media screen and (max-width: 991px) {
    .design-roof {
        padding: 230px 0 100px;
        margin: -138px 0 0 0;
    }
    .design-roof__wrap {
        padding: 0 20px;
        gap: 20px;
    }
    .design-roof__inner_1 {
        gap: 20px;
    }
    .design-roof__info {
        gap: 20px;
    }
    .design-roof__inner_2 {
        gap: 20px;
    }
    .design-roof__img_1 {
        max-width: 93px;
        height: 135px;
    }
    .design-roof__img_2 {
        max-width: 207px;
        height: 135px;
    }
    .design-roof__img_3 {
        max-width: 320px;
        height: 135px;
    }
    .design-roof__img_4 {
        max-width: 140px;
        height: 182px;
    }
    .design-roof__img_5 {
        max-width: 160px;
        height: 182px;
    }
}
@media screen and (max-width: 767px){
    .design-roof {
        padding: 480px 0 100px;
        margin: -350px 0 0 0;
    }
    .design-roof__wrap {
        flex-direction: column;
        gap: 30px;
    }
    .design-roof__inner_1 {
        gap: 20px;
    }
    .design-roof__info {
        gap: 20px;
        text-align: center;
    }
    .design-roof__inner_2 {
        gap: 20px;
    }
    .design-roof__info h2 {
        font-size: 30px;
    }
    .design-roof__info p {
        font-size: 14px;
    }
    .design-roof__img_1 {
        width: 100%;
        max-width: 100%;
        height: 100%;
    }
    .design-roof__img_2 {
        width: 100%;
        max-width: 100%;
        height: 100%;
    }
    .design-roof__img_3 {
        width: 100%;
        max-width: 100%;
        height: 100%;
    }
    .design-roof__img_4 {
        width: 100%;
        max-width: 100%;
        height: auto;
    }
    .design-roof__img_5 {
        width: 100%;
        max-width: 100%;
        height: 100%;
    }
}
@media screen and (max-width: 567px) {
    .design-roof {
        padding: 70vw 0 100px;
        margin: -50vw 0 0 0;
    }
    .design-roof__wrap {
        gap: 12px;
        padding: 0 12px;
    }
    .design-roof__inner_1 {
        gap: 12px;
    }
    .design-roof__inner_2 {
        gap: 12px;
    }
    .design-roof__info {
        gap: 12px;
    }
    .design-roof__info h2 {
        font-size: 20px;
    }
    .design-roof__info p {
        font-size: 12px;
    }
}
/* luggage============================================================== */
.luggage-roof {
    display: flex;
    justify-content: end;
    padding: 350px 50px;
    background-image: url(/image/catalog/landings/roof-tent-r/luggage.webp);
    background-size: cover;
    background-repeat: no-repeat;
}
.luggage-roof__info {
    display: flex;
    flex-direction: column;
    gap: 30px;
    max-width: 675px;
    width: 100%;
}
.luggage-roof__info h3 {
    color: #FFF;
    font-size: 64px;
    font-weight: 800;
    line-height: 120%;
    text-transform: uppercase;
    margin: 0;
}
.luggage-roof__info p {
    color: #FFF;
    font-size: 22px;
    font-weight: 400;
    line-height: 130%;
    margin: 0;
}
@media screen and (max-width: 1599px) {
    .luggage-roof {
        padding: 277px 30px;
    }
    .luggage-roof__info {
        max-width: 583px;
    }
    .luggage-roof__info h3 {
        font-size: 58px;
    }
}
@media screen and (max-width: 1344px) {
    .luggage-roof {
        padding: 250px 40px;
    }
    .luggage-roof__info {
        max-width: 496px;
    }
    .luggage-roof__info h3 {
        font-size: 50px;
    }
    .luggage-roof__info p {
        font-size: 18px;
    }
}
@media screen and (max-width: 1199px) {
    .luggage-roof {
        padding: 200px 30px;
    }
    .luggage-roof__info {
        max-width: 395px;
    }
    .luggage-roof__info h3 {
        font-size: 40px;
    }
}
@media screen and (max-width: 991px) {
    .luggage-roof {
        padding: 138px 20px;
    }
    .luggage-roof__info {
        max-width: 326px;
        gap: 20px;
    }
    .luggage-roof__info h3 {
        font-size: 32px;
    }
    .luggage-roof__info p {
        font-size: 16px;
    }
}
@media screen and (max-width: 767px){
    .luggage-roof {
        padding: 93vw 80px 60px;
        background-image: url(/image/catalog/landings/roof-tent-r/luggage-m.webp);
        justify-content: center;
        background-position: top center;
    }
    .luggage-roof__info {
        text-align: center;
    }
    .luggage-roof__info h3 {
        font-size: 32px;
    }
    .luggage-roof__info p {
        font-size: 16px;
    }
}
@media screen and (max-width: 567px) {
        .luggage-roof {
        padding: 85vw 12px 30px;
    }
    .luggage-roof__info {
        max-width: 246px;
        gap: 10px;
    }
    .luggage-roof__info h3 {
        font-size: 22px;
    }
    .luggage-roof__info p {
        font-size: 12px;
    }
}
/* fixing========================================================== */
.fixing-roof {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 200px 0 100px;
    padding: 0 50px;
}
.fixing-roof img {
    max-width: 417px;
    width: 100%;
}
.fixing-roof__info {
    display: flex;
    flex-direction: column;
    gap: 30px;
    max-width: 743px;
    width: 100%;
}
.fixing-roof__info h3 {
    color: #266141;
    font-size: 51px;
    font-weight: 800;
    line-height: 120%;
    text-transform: uppercase;
    margin: 0;
}
.fixing-roof__info p {
    color: #020A0A;
    font-size: 20px;
    font-weight: 400;
    line-height: 130%;
    margin: 0;
}
@media screen and (max-width: 1599px) {
    .fixing-roof {
        margin: 180px 0 100px;
        padding: 0 50px 0 0;
    }
    .fixing-roof__info {
        max-width: 645px;
    }
    .fixing-roof__info h3 {
        font-size: 42px;
    }
}
@media screen and (max-width: 1344px) {
    .fixing-roof {
        margin: 100px 0;
        padding: 0 50px;
    }
    .fixing-roof img {
        max-width: 327px;
    }
    .fixing-roof__info {
        max-width: 550px;
    }
    .fixing-roof__info h3 {
        font-size: 38px;
    }
    .fixing-roof__info p {
        font-size: 18px;
    }
}
@media screen and (max-width: 1199px) {
    .fixing-roof {
        padding: 0 50px 0 0;
    }
    .fixing-roof__info {
        max-width: 445px;
        gap: 25px;
    }
    .fixing-roof__info h3 {
        font-size: 30px;
    }
    .fixing-roof__info p {
        font-size: 16px;
    }
}
@media screen and (max-width: 991px) {
    .fixing-roof {
        padding: 0 20px;
        flex-direction: column-reverse;
        gap: 60px;
    }
    .fixing-roof__info {
        max-width: 100%;
        text-align: center;
    }
    .fixing-roof img {
        margin: 0 0 0 -50px;
    }
}
@media screen and (max-width: 767px){
    .fixing-roof {
        padding: 0 10px;
        gap: 40px;
    }
    .fixing-roof__info {
        gap: 20px;
    }
    .fixing-roof__info h3 {
        font-size: 22px;
    }
    .fixing-roof__info p {
        font-size: 14px;
    }
}
@media screen and (max-width: 567px) {
    .fixing-roof img {
        max-width: 220px;
        margin: 0 0 0 -30px;
    }
    .fixing-roof {
        padding: 0;
    }
    .fixing-roof__info h3 {
        font-size: 20px;
    }
    .fixing-roof__info p {
        font-size: 12px;
    }
}