@media only screen and (max-width: 768px) {
    .btn {
        padding: calc(9px + (11 - 9) * ((100vw - 320px) / (768 - 320))) calc(19px + (34 - 19) * ((100vw - 320px) / (768 - 320)));
        font-size: calc(12px + (20 - 12) * ((100vw - 320px) / (768 - 320)));
    }

    .container{
        --bs-gutter-x: calc(0px + (150 - 0) * ((100vw - 320px) / (768 - 320)));
    }

    .img_cover {
        border-radius: 20px;
        overflow: hidden;
        max-width: 100%;

    }

    .line_top .logo {
        top: unset;
    }
    .line_top .object_top_1 {
        display: none;
    }

    .logo {
        position: relative;
        padding:
                calc(10px + (15 - 10) * ((100vw - 320px) / (768 - 320)))
                calc(20px + (25 - 20) * ((100vw - 320px) / (768 - 320)));
    }

    .logo h1, .logo h3{
        font-size: calc(18px + (25 - 18) * ((100vw - 320px) / (768 - 320)));
    }

    .logo p {
        font-size: calc(16px + (20 - 16) * ((100vw - 320px) / (768 - 320)));
        letter-spacing: calc(2px + (3.2 - 2) * ((100vw - 320px) / (768 - 320)));
    }

    .social a img.tg{
        max-width: calc(33px + (45 - 32) * ((100vw - 320px) / (768 - 320)));
    }

    .social a img.wa {
        max-width: calc(32px + (45 - 33) * ((100vw - 320px) / (768 - 320)));
    }


    .line_main{
        padding-bottom: 42px;
    }
    .line_main .container{
        display: block;
    }

    .line_main p{
        font-size: calc(16px + (24 - 16) * ((100vw - 320px) / (768 - 320)));
        margin-bottom: calc(9px + (14 - 9) * ((100vw - 320px) / (768 - 320)));
    }

    .line_main h3 {
        font-size: calc(27px + (54 - 27) * ((100vw - 320px) / (768 - 320)));
    }

    .line_main h4{
        font-size: calc(19px + (34 - 19) * ((100vw - 320px) / (768 - 320)));
        margin-bottom: 45px;
    }

    .line_main .photo{
        display: none;
    }
    .line_main .object_flowers{
        max-width: calc(150px + (180 - 150) * ((100vw - 320px) / (768 - 320)));
        left: -15px;
        bottom: calc(-35px + (-40 - -35) * ((100vw - 320px) / (768 - 320)));
        z-index: 99;
    }
    .line_main .btn_one{
        margin-left: 110px;
    }
    .triangle {
        height: 47px;
        bottom: -47px;
    }

    .info{
        padding-top: 130px;
        padding-bottom: 130px;
    }
    .info .container{
        position: relative;
        z-index: 10;
    }
    .info .content{
        padding: 0 20px;
    }
    .info .content p {
        font-size: calc(16px + (26 - 16) * ((100vw - 320px) / (768 - 320)));
        font-weight: 200;
        line-height: calc(20px + (30 - 20) * ((100vw - 320px) / (768 - 320)));
        margin-bottom: calc(20px + (40 - 20) * ((100vw - 320px) / (768 - 320)));
    }

    .info .object_divan {
        right: 10px;
        bottom: calc(-80px + (-120 - -80) * ((100vw - 320px) / (768 - 320)));
        z-index: 99;
        max-width: calc(90px + (150 - 90) * ((100vw - 320px) / (768 - 320)));
    }

    .info .object_left_side, .info .object_right_side{
        max-height: 330px;
        z-index: 1;
    }
    .about{
        padding-bottom: 70px;
    }
    .about .right{
        padding: 0 calc(20px + (0 - 20) * ((100vw - 320px) / (768 - 320)));
    }
    .about .left{
        display: none;
    }

    .about h4 {
        font-size: calc(26px + (45 - 26) * ((100vw - 320px) / (768 - 320)));
    }

    .about p {
        font-size: calc(16px + (24 - 16) * ((100vw - 320px) / (768 - 320)));
    }

    .problems{
        padding-top: 20px;
        padding-bottom: calc(30px + (80 - 30) * ((100vw - 320px) / (768 - 320)));
    }
    .problems .object_list {
        left: 0;
        top: -69px;
        max-width: 90px;
        z-index: 99;
    }

    .problems .container .section_title h4{
        font-size: calc(20px + (35 - 20) * ((100vw - 320px) / (768 - 320)));
    }

    .problems .section_title {
        margin-bottom: calc(35px + (45 - 35) * ((100vw - 320px) / (768 - 320)));
        padding-right: calc(20px + (0 - 20) * ((100vw - 320px) / (768 - 320)));
        padding-left: calc(104px + (0 - 104) * ((100vw - 320px) / (768 - 320)));
        text-align: start !important;
    }

    .problems .row{
        text-align: center;
        row-gap: calc(10px + (20 - 10) * ((100vw - 320px) / (768 - 320)));
    }

    .problems p{
        font-size: calc(16px + (20 - 16) * ((100vw - 320px) / (768 - 320)));
    }
    .problem-item{
        align-items: start;
        text-align: start;
    }

    .problem-item h3{
        font-size: calc(18px + (24 - 18) * ((100vw - 320px) / (768 - 320)));
    }

    .problem-item p{
        font-size: calc(18px + (24 - 18) * ((100vw - 320px) / (768 - 320)));
    }

    .faq {
        padding-top: 130px;
        padding-bottom: 60px;
    }

    .media .section_title{
        margin-bottom: 20px;
    }

    .media .section_title h3{
        font-size: calc(27px + (45 - 27) * ((100vw - 320px) / (768 - 320)));
    }

    .gallery-grid {
        display: grid;
        /* Создаем 2 колонки одинаковой ширины (1fr - одна фракция) */
        grid-template-columns: 1fr 1fr;
        /* Задаем отступ между колонками и рядами */
        gap: 15px; /* Вы можете изменить значение отступа */
        padding: unset;
    }

    /* Для дочерних элементов (.gallery-grid a) больше не нужно задавать ширину */
    /* Убедитесь, что убрали или переопределили старое правило display: block */
    .gallery-grid a {
        display: inline-block; /* или оставьте как есть, grid сам все расставит */
        width: 100%; /* Элемент займет всю ширину ячейки грида */
    }

    .faq {
        padding-top: 60px;
        padding-bottom: 110px;
    }

    .faq .section_title h3{
        font-size: calc(27px + (45 - 27) * ((100vw - 320px) / (768 - 320)));
    }

    .accordion-button {
        font-size: calc(16px + (24 - 16) * ((100vw - 320px) / (768 - 320)));
    }

    .faq .object_bottom {
        max-height: 90px;
    }

    .main_offer{
        padding-top: 150px;
    }

    .main_offer p{
        font-size: calc(16px + (24 - 16) * ((100vw - 320px) / (768 - 320)));
        margin-bottom: calc(9px + (14 - 9) * ((100vw - 320px) / (768 - 320)));
    }

    .main_offer h3 {
        font-size: calc(27px + (54 - 27) * ((100vw - 320px) / (768 - 320)));
    }

    .main_offer h4{
        font-size: calc(19px + (34 - 19) * ((100vw - 320px) / (768 - 320)));
        margin-bottom: 45px;
    }

    form{
        padding: 20px;
        border-radius: 10px;
    }


    footer .object_tumb {
        z-index: 99;
        left: calc(-150px + (20  - -150) * ((100vw - 320px) / (768 - 320)));
        bottom: 0;
        max-width: 280px;
    }

    .f_social{
        margin-bottom: 20px;
    }

    .f_logo{
        display: block;
    }


    .object_photo{
        display: block;
        right: calc(12px + (90  - 12) * ((100vw - 320px) / (768 - 320)));
        top: calc(28px + (20  - 28) * ((100vw - 320px) / (768 - 320)));
        border-radius: 50%;
        max-width: calc(80px + (139  - 80) * ((100vw - 320px) / (768 - 320)));
        padding: 6px;
        border: 0.4px solid var(--color-blue);
    }

    .blog.page .herro{
        padding-bottom: 60px;
    }
    .blog.page .herro .container{
        grid-template-columns: 1fr;
        max-width: 550px;
    }
    .blog.page .herro .content{
        padding-top: 60px;
        padding-bottom: 20px;
    }
    .blog.page .herro h1 {
        font-size: calc(16px + (24 - 16) * ((100vw - 320px) / (768 - 320)));
    }
    .blog.page .herro .img_cover{
        position: relative;
        max-height: calc(189px + (250 - 189) * ((100vw - 320px) / (768 - 320)));
        top: 0;
    }
    .blog.page .herro .img_cover img{
        max-height: calc(189px + (250 - 189) * ((100vw - 320px) / (768 - 320)));
        object-position: center;
        object-fit: cover;
    }
    .blog.page .herro .object_clip {
        top: calc(-26px + (-46 - -26) * ((100vw - 320px) / (768 - 320)));
        right: calc(-34px + (-64 - -34) * ((100vw - 320px) / (768 - 320)));
        max-width: calc(170px + (250 - 170) * ((100vw - 320px) / (768 - 320)));
    }
    .blog.page .herro .object_flowers {
        top: 100px;
        right: calc(-78px + (-122 - -78) * ((100vw - 320px) / (768 - 320)));
        max-width: calc(180px + (240 - 180) * ((100vw - 320px) / (768 - 320)));
    }

    .blog.page .intent {
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .blog.page .intent .container {

        grid-template-columns: 1fr;

    }


    .blog.page .section_title h3{
        font-size: calc(16px + (24 - 16) * ((100vw - 320px) / (768 - 320)));

    }
}

@media only screen and (min-width: 575px) and (max-width: 768px) {
    .f_logo{
        display: flex;
    }
    .problems .row{
        text-align: start;
    }
    .f_social{
        display: flex;
        justify-content: end;
        padding-right: calc(40px + (70  - 40) * ((100vw - 575px) / (769 - 575)));
    }
    .problems .section_title{
        text-align: center !important;
    }


}

@media only screen and (min-width: 320px) and (max-width: 575px) {
    .problems .section_title {
        margin-bottom: calc(35px + (45 - 35) * ((100vw - 320px) / (575 - 320)));
        padding-right: calc(20px + (0 - 20) * ((100vw - 320px) / (575 - 320)));
        padding-left: calc(104px + (110 - 104) * ((100vw - 320px) / (575 - 320)));
        text-align: start !important;
    }
}