@media screen and (min-width: 420px) and (max-width: 768px) {
    body {
        width: 100%;
    }
    h2, h3 {
        margin: 0;
    }
    .hero {
        height: 900px;
        margin-left: 20px;
        display: flex;
        flex-direction: column;
        margin-top: -100px;
    }
    .start-info {
        /* text - mob */
        font-size: 28px;
        font-style: normal;
        font-weight: 500;
        line-height: normal
    }
    .KDF {
        max-width: 325px;
        /* hero title - mob */
        font-size: 54px;
        font-style: normal;
        font-weight: 900;
        line-height: 110%; 
    }
    .whom__online {
        display: flex;
        width: 325px;
        /* heading lg - mob */
        font-size: 22px;
        font-style: normal;
        font-weight: 400;
        line-height: 110%;
    }
    .hero-img {
        width: 208px;
        height: 374px;
        margin-top: 550px;
        margin-left: auto;
    }
    .header__image {
        width: 360px;
        height: 550px;
        margin-top: -160px;
        margin-left: 5%;
    }
    #header__btn {
        margin-top: 500px;
    }
    .arrow {
        display: none;
    }
    .advantages {
        margin-top: 100px;
        display: flex;
        width: 100%;
        flex-direction: column;
        align-items: center;
        gap: 50px;
        padding: 0;
    }
    .course__advantages {
        text-align: center;
        font-size: 32px;
        font-style: normal;
        font-weight: 900;
        line-height: 110%;
    }
    .advantages-grid {
        display: flex;
        padding: 10px;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        align-self: stretch;
        width: 388px;
    }
    .adv-item {
        font-size: 20px;
        font-style: normal;
        font-weight: 400;
        line-height: 110%;
        align-self: stretch;
        padding: 8px;
    }
    .adv-item-info {
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 110%;
    }
    .about__author {
        margin-top: 50px;
        height: 1113px;
        width: 100%;
        display: flex;
        flex-direction: column-reverse;
        background: linear-gradient(89deg, #0D0601 0.96%, #EFEFEF 99.08%);
    }
    .author-text {
        width: 340px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin: 0;
    }
    .author__name {
        font-size: 22px;
        font-style: normal;
        font-weight: 400;
        line-height: 110%;
        display: flex;
        align-self: center;
    }
    .about-author-list {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        margin-left: 50px;
    }
    .author-list-item {
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: normal
    }
    .author__pic-div {
        display: flex;
        justify-content: center;
        align-items: center;

    }
    .author__pic {
        width: 395px;
        height: 407px;
        flex-shrink: 0;
        aspect-ratio: 33/34;
    }
    .about__author__item {
        font-size: 32px;
        font-style: normal;
        font-weight: 900;
        line-height: 110%;
        display: flex;
        align-self: center;
        padding-top: 70px;
    }
    .for-who {
        display: flex;
        width: 400px;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
        gap: 50px;
        padding: 0;
        margin-top: 100px;
    }
    .for__who__general {
        text-align: center;
        /* block title - mob */
        font-size: 32px;
        font-style: normal;
        font-weight: 900;
        line-height: 110%
    }
    .for-who-list {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 30px;
        align-self: stretch;
    }
    .for-who-list-general {
        max-width: 380px;
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 16px;
        font-size: 22px;
        font-style: normal;
        font-weight: 400;
        line-height: 110%;
        margin-left: 100px;
    }
    .for-who-item {
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
    }
    .for-who-mark {
        width: 108px;
        height: 89px;
        margin-bottom: -100px;
        margin-left: -200px;
    }
    .not-for-who-block {
        max-width: 100%;        
        height: 154px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(---, linear-gradient(89deg, #EFEFEF 0.96%, #0D0601 122.08%));
        margin-bottom: 100px;
    }
    .not-for-who {
        font-size: 30px;
        font-style: normal;
        font-weight: 400;
        line-height: 110%;
        width: 282px;
        
    }
    .not-for-who-item {
        text-align: center;
        text-transform: uppercase;
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: normal
    }
    .program {
        width: 400px;
        height: 2747px;
    }
    .program__main {
        font-size: 32px;
        font-style: normal;
        font-weight: 900;
        line-height: 110%;
    }
    .program-info {
        width: 388px;
        font-size: 20px;
        font-style: normal;
        font-weight: 400;
        line-height: 110%;
    }
    .program__hair-length {
        font-size: 22px;
        font-style: normal;
        font-weight: 400;
        line-height: 110%
    }
    .video-box-long, .video-box-short {
        width: 388px;
        height: 218px;
        border-radius: 8px;
    }
    .gallery__long {
        display: grid;
        align-items: center;
        width: 388px;
        height: 647px;
        row-gap: 16px;
        column-gap: 16px;
        grid-template-rows: repeat(3, minmax(0, 1fr));
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-left: 7px;
    }
    .gallery__short {
        display: grid;
        align-items: center;
        width: 388px;
        height: 1089px;
        row-gap: 16px;
        column-gap: 16px;
        flex-shrink: 0;
        grid-template-rows: repeat(5, minmax(0, 1fr));
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-left: 7px;
    }

    .gallery__item img {
        width: 188px;
        height: 152px;
        border-radius: 8px;
    }
    .gallery__long-item img {
        width: 188px;
        height: 152px;
        border-radius: 8px;
    }
    .haircut__name {
        display: flex;
        width: 154px;
        height: 28px;
        padding: 10px;
        align-items: flex-start;
        gap: 10px;
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        margin-left: 5px;
        margin-top: -10px;
    }
    .price {
        display: flex;
        width: 388px;
        padding: 50px 16px;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 50px;
        margin-top: 200px;
    }
    .price-amount {
        font-size: 32px;
        font-style: normal;
        font-weight: 900;
        line-height: 110%;
    }
    .price-options {
        display: flex;
        width: 388px;
        flex-direction: column;
        align-items: flex-start;
        gap: 30px
    }
    .price-card1, .price-card2 {
        display: flex;
        width: 388px;
        padding: 10px 10px;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        align-self: stretch;
    }
    .tariff1, .tariff2 {
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: normal
    }
    .triff-self, .tariff-help {
        font-size: 22px;
        font-style: normal;
        font-weight: 400;
        line-height: 110%;
    }
    .tariff-list-item1, .tariff-list-item2 {
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 110%;
    }
    .start {
        width: 400px;
        height: 1006px;
        display: flex;
    }
    .start__course-info {
        display: flex;
        width: 388px;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        align-self: stretch;
        margin-left: 16px;
    }
    .start__course-start {
        font-size: 22px;
        font-style: normal;
        font-weight: 400;
        line-height: 110%;
        margin-bottom: 0;
    }
    .start__course-date {
        font-size: 42px;
        font-style: normal;
        font-weight: 900;
        line-height: 110%
    }
    .start__course-list {
        width: 388px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        align-self: stretch;
    }
    .start__course-list-item {
        width: 354px;
        gap: 20px;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 110%;
    }
    .start__course {
        width: 400px;
        height: 376px;
        margin-top: 470px;

    }
    .start__course-pic {
        width: 360px;
        height: 506px;
        margin-left: -10px;
    }
    .faq {
        display: flex;
        width: 388px;
        padding: 50px 16px 100px 16px;
        flex-direction: column;
        align-items: center;
    }
    .faqbox {
        display: flex;
        width: 388px;
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
    .faq-item {
        display: flex;
        width: 388px;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        align-self: stretch;
        border: 1px solid #000000;
        border-radius: 8px;
    }
    .question {
        width: 380px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        align-self: stretch;
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
    }
    .answer {
        width: 367px;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 110%;
    }
    .footer-info-block {
        display: flex;
        width: 380px;
        padding: 1px 0 30px 0;
        margin: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 40px;
    }
    .footer-info {
        display: flex;
        width: 380px;
        flex-direction: column;
        align-items: center;
        gap: 40px;
    }
    .adv-school-logo {
        width: 180px;
        height: 93px;
    }
    .adv-school-trait-item {
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
    }
    .agreement {
        display: flex;
        width: 380px;
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
}