@media (min-width: 320px) and (max-width: 767px) {

    html,
    body {
        font-size: calc(100vw / 375 * 8);
    }

    .btn {
        width: 100%;
    }


    .title1 {
        font-size: 5rem;
        line-height: 5rem;
    }

    .title2 {
        font-size: 5rem;
        line-height: 5rem;
    }

    .title3 {
        font-size: 5rem;
        line-height: 5rem;
    }

    .name1 {
        font-size: 3rem;
        line-height: 3rem;
    }

    .text1 {
        font-size: 1.75rem;
        line-height: 2.75rem;
    }

    .header {
        padding: 2rem;
        align-items: center;
        justify-content: space-between;
    }

    .header__logo-wrapper {
        height: 6rem;
    }

    .header__nav {
        position: absolute;
        top: 0;
        right: 100%;
        width: 100%;
        height: 100svh;

        justify-content: space-between;

        padding: 2rem;
        gap: 2rem;
        background: var(--dark-bg);
    }

    .header__nav--open {
        top: 0;
        right: 0;
        width: 100%;
        height: 100svh;
    }

    .header__menu-open,
    .header__menu-close {
        display: flex;
        width: 6rem;
        height: 6rem;
    }

    .header__list {
        flex-direction: column;
        align-items: flex-start;
        margin-left: 0;
    }




















    .intro {
        height: 100svh;
    }

    .intro__item {
        flex-flow: column;
        align-items: flex-start;
        justify-content: center;
        padding: 2rem;
    }

    .intro__title-wrapper {
        left: 2rem;
    }

    .intro__pre-title {
        font-size: 3rem;
        line-height: 3rem;
        padding: 1rem 1rem 0 1rem;
    }

    .intro__title {
        font-size: 7rem;
        line-height: 7rem;
        padding: 0.5rem 1rem 1rem 1rem;

        display: -webkit-box;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
    }

    .intro__link {
        display: none;
    }

    .intro__nav {
        top: auto;
        bottom: 2rem;
        left: 2rem;
        right: auto;

        flex-direction: row;
    }

    .intro__nav-prev,
    .intro__nav-next {
        padding: 1.75rem;
    }


    .intro__nav-prev-svg,
    .intro__nav-next-svg {
        width: 3rem;
        height: 3rem;
    }




















    .who {
        padding: 5rem 2rem 10rem 2rem;
    }

    .who__title {
        margin-bottom: 3rem;
    }

    .who__subtitle {
        max-width: 100%;

        font-size: 3rem;
        line-height: 4rem;

        text-wrap: balance;

        margin-bottom: 3rem;
    }

    .who__divider {
        margin-bottom: 3rem;
    }

    .who__text-btn {
        flex-direction: column;
    }

    .who__text {
        max-width: 100%;
        font-size: 1.75rem;
        line-height: 2.75rem;

        text-wrap: balance;

        margin-bottom: 3rem;
    }














    .featured {
        flex-direction: column;
        padding: 0 2rem 5rem 2rem;
    }

    .featured__title {
        font-size: 5rem;
        line-height: 5rem;

        margin-bottom: 3rem;
    }










    .projects__list {
        flex-direction: column;
        flex-wrap: nowrap;
    }

    .projects__item {
        width: 100%;
        aspect-ratio: 1/0.8 !important;
    }

    .projects__overlay {
        width: 100%;
        padding: 2rem;
        background: transparent;
        opacity: 1;
    }

    .projects__link {
        display: none;
    }

    .projects__item--one .projects__name,
    .projects__item--one .projects__subname {
        color: var(--white);
    }

    .projects__item--one .projects__name,
    .projects__name {
        margin-top: auto;

        font-size: 3rem;
        line-height: 3rem;

        margin-bottom: 0.5rem;
    }

    .projects__item--one .projects__subname,
    .projects__subname {
        font-size: 2rem;
        line-height: 3rem;
    }

    .projects__item--two .projects__item-wrapper,
    .projects__item--three .projects__item-wrapper {
        padding: 2rem;
    }

    .projects__item--two:hover .projects__name,
    .projects__item--three:hover .projects__name,
    .projects__item:hover .projects__subname {
        color: var(--white);
    }

    .projects__item:hover .projects__item-img {
        transform: none;
        opacity: 0.75;
    }

    .projects__item-img {
        opacity: 0.75;
    }
















    .creators {
        flex-direction: column;
        padding: 5rem 2rem;
    }

    .creators__content {
        width: 100%;
    }

    .creators__title {
        font-size: 5rem;
        line-height: 5rem;
        margin-bottom: 3rem;

    }

    .creators__text {
        max-width: 100%;
        width: 100%;
        font-size: 1.75rem;
        line-height: 2.75rem;
        text-wrap: balance;
        margin-bottom: 3rem;

        padding-top: 2.5rem;
        border-top: 0.125rem solid #E3E3E3;
    }

    .creators .creators__btn {
        display: flex;
        margin-bottom: 0;
    }

    .creators__content .creators__btn {
        display: none;
    }





















    .creators-img {
        aspect-ratio: 1/1.2;
        padding: 5rem 2rem;
    }

    .creators-img__text {
        font-size: 3rem;
        line-height: 3rem;
        text-align: left;

        padding: 2rem;
        background: var(--accent);
    }

    .creators-img__img {
        width: 500%;
        animation: imgRide 30s linear infinite alternate;
    }

    @keyframes imgRide {
        from {
            left: 0;
        }

        to {
            left: -400%;
        }
    }















    .team {
        padding: 5rem 2rem;
        align-items: center;
        justify-content: center;
    }

    .team__list {
        display: flex;
        padding: 0;
        gap: 0;

        margin-bottom: 3rem;
    }

    .team__item:first-child {
        aspect-ratio: 1 / 1.2;
    }

    .team__item {
        aspect-ratio: 1 / 1.2;
        padding: 2rem 0;
    }

    .team__name {
        padding: 1.5rem;
        font-size: 2.5rem;
        line-height: 2.5rem;
    }

    .team__job {
        font-size: 1.5rem;
        line-height: 1.5rem;
    }

    .team__img {
        filter: grayscale(0);
    }

    .team__item:hover .team__img {
        filter: grayscale(0);
        transform: scale(1);
    }


    .team .swiper-pagination {
        position: relative;
        bottom: auto;
        top: auto;
        left: auto;
        font-size: 0;
    }

    .swiper-pagination-bullet {
        width: 1rem;
        height: 1rem;
        border-radius: 0;

        margin: 0 1rem !important;
        background: #E3E3E3;
        opacity: 1;
    }

    .swiper-pagination-bullet-active {
        background: var(--accent);
    }




















    .collaborators {
        padding: 5rem 0;
    }

    .collaborators__title {
        width: calc(100% - 4rem);

        font-size: 5rem;
        line-height: 5rem;
        margin-bottom: 3rem;
    }

    .collaborators__item {
        width: 20rem;
        height: 10rem;
    }













    .footer {
        padding: 5rem 2rem;
        flex-direction: column;
        gap: 4rem;
    }

    .footer__up {
        display: flex;
        flex-direction: column;
        gap: 8rem;
    }

    .footer__title {
        font-size: 4rem;
        line-height: 4rem;
        text-align: center;

        margin-bottom: 3rem;
    }

    .footer__form {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 3rem;
    }

    .footer__label:nth-child(1),
    .footer__label:nth-child(2) {
        width: 100%;
    }

    .footer__label {
        width: 100%;
    }

    .footer__label-name {
        display: none;
    }

    .footer__input {
        text-align: center;
    }

    .footer__label:nth-child(3) .footer__input {
        min-height: auto;
        max-height: 7.125rem;
    }

    .footer__input:hover {
        border-bottom: 0.125rem solid var(--accent);
    }

    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active {
        -webkit-box-shadow: 0 0 0rem 125rem #454545 inset !important;
        box-shadow: 0 0 0rem 125rem #454545 inset !important;
        -webkit-text-fill-color: var(--accent) !important;
        /* Цвет текста */
        background-color: #454545 !important;
        /* Фон, если браузер все равно применяет фон */
    }

    .footer__item {
        width: 100%;
        align-items: center;
        flex-direction: column;
        gap: 1rem;
    }

    .footer__item:first-child {
        padding-top: 0;
    }

    .footer__item:last-child {
        padding-bottom: 0;
    }

    .footer__category {
        width: 100%;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .footer__contacts {
        width: 100%;
    }

    .footer__contact {
        text-align: center;
    }

    .footer__down {
        flex-direction: column;
        gap: 2rem;
    }

    .footer__link {
        text-align: center;
    }

    .footer__dev {
        text-align: center;
    }















































































































    /* CONTACTS PAGE */

    .contacts {
        padding: 15rem 2rem 5rem 2rem;
    }

    .contacts__list {
        flex-direction: column;
        gap: 3rem;
    }

    .contacts__item {
        width: 100%;
    }

    .contacts__links {
        gap: 2rem;
    }

    .contacts__link-text {
        font-size: 1.75rem;
        line-height: 2.75rem;
    }

    .contacts__title {
        font-size: 5rem;
        line-height: 5rem;

        margin-bottom: 3rem;
    }

    .contacts__map {
        aspect-ratio: 1/1.2;
    }

    .contacts__item:last-child {
        padding: 3rem 2rem;
    }

    .contacts__form {
        flex-direction: column;
        gap: 3rem;
    }

    .contacts__input:nth-child(1),
    .contacts__input:nth-child(2),
    .contacts__input:nth-child(3) {
        width: 100%;
        text-align: center;
    }

    .contacts__input:nth-child(1) {
        margin-right: 0;
        margin-bottom: 0;
    }

    .contacts__input:nth-child(3) {
        margin-bottom: 0;
    }

    .page-contacts .footer__form-wrapper {
        display: none;
    }





















































































































































    .page-about {
        background: var(--white);
    }

    .story {
        align-items: flex-start;
        padding: 15rem 2rem 5rem 2rem;
    }

    .story__text {
        text-align: left;
    }

    .about-slider__item {
        flex-direction: column;
        padding: 0 2rem;
        gap: 4rem;
    }

    .about-slider__img-wrapper {
        width: 100%;
    }

    .about-slider__content {
        width: 100%;
    }

    .about-slider__text {
        max-width: 100%;
    }

    .about-slider__list {
        margin-bottom: 3rem;
    }

    .about-slider__nav-wrapper {
        display: none;
    }

    .about-slider__pagination {
        position: relative;
        padding: 0 2rem;
        justify-content: center;
        bottom: auto;
        top: auto;
        left: auto;
        font-size: 0;

        margin-bottom: 0;
    }

    .about-slider__pagination:before {
        display: none;
    }

    .about-slider__pagination .swiper-pagination-bullet {
        width: 1rem !important;
        height: 1rem !important;
        border-radius: 0 !important;
        margin: 0 1rem !important;
        background: #E3E3E3 !important;
        opacity: 1 !important;
    }

    .about-slider__pagination .swiper-pagination-bullet-active {
        background: var(--accent) !important;
    }





    .values {
        align-items: flex-start;
        padding: 6rem 2rem 0 2rem;
    }

    .values__title {
        max-width: 100%;
    }

    .values__subtitle {
        max-width: 100%;
        text-align: left;

        margin-bottom: 3rem;
    }

    .values__list {
        flex-wrap: nowrap;
        overflow: visible;
        gap: 0;
        margin-bottom: 3rem;
    }

    .values__item {
        flex-direction: column;
        width: 100% !important;
        margin-left: 0 !important;
        background: transparent;
        gap: 2rem;
    }

    .values__item:nth-child(4n+1):after,
    .values__item:nth-child(4n+4):after {
        display: none;
    }

    .values__content {
        position: relative;
        padding: 2rem;
        aspect-ratio: 1/1;
    }

    .values__name {
        font-size: 5rem;
        line-height: 5rem;
        opacity: 1 !important;
        margin-top: auto;
        margin-left: 0 !important;
        margin-right: auto;
    }

    .values__overlay {
        position: relative;
        top: auto;
        left: auto;
        opacity: 1;
        padding: 2rem;
        height: auto;
    }

    .values__overlay .values__name {
        display: none;
    }


    .values .swiper-pagination {
        position: relative;
        padding: 0 2rem;
        justify-content: center;
        bottom: auto;
        top: auto;
        left: auto;
        font-size: 0;

        margin-bottom: 0;
    }

    .values .swiper-pagination:before {
        display: none;
    }

    .values .swiper-pagination .swiper-pagination-bullet {
        width: 1rem !important;
        height: 1rem !important;
        border-radius: 0 !important;
        margin: 0 1rem !important;
        background: #E3E3E3 !important;
        opacity: 1 !important;
    }

    .values .swiper-pagination .swiper-pagination-bullet-active {
        background: var(--accent) !important;
    }

    .page-about .collaborators {
        background: var(--white);
        padding: 5rem 0;
    }

    .page-about .collaborators__title {
        width: calc(100% - 4rem);
        font-size: 5rem;
        line-height: 5rem;
        margin-bottom: 3rem;
    }






















































































































































































    .page-team .creators {
        align-items: flex-start;
        padding: 15rem 2rem 5rem 2rem;
    }

    .page-team .creators__btn {
        display: none;
    }

    .page-team .creators__text {
        margin-bottom: 0;
    }

    .peoples {
        padding: 0 2rem;
    }

    .peoples__list {
        flex-wrap: nowrap;
        overflow: visible;
        gap: 0;

        margin-bottom: 3rem;
    }

    .peoples__item {
        width: 100%;
    }

    .peoples__item:nth-child(20n+1) {
        margin-left: 0;
    }

    .peoples__item:nth-child(20n+1):after {
        display: none;
    }

    .peoples__item:nth-child(20n+6) {
        margin-left: 0;
    }

    .peoples__item:nth-child(20n+10) {
        margin-right: 0;
    }

    .peoples__item:nth-child(20n+15) {
        margin-right: 0;
    }

    .peoples__item:nth-child(20n+15):after {
        display: none;
    }

    .peoples__item:nth-child(20n+16) {
        margin-left: 0;
    }

    .peoples__item:nth-child(20n+20) {
        margin-right: 0;
    }

    .peoples .swiper-pagination {
        position: relative;
        bottom: auto;
        top: auto;
        left: auto;
        font-size: 0;
    }

    .swiper-pagination-bullet {
        width: 1rem;
        height: 1rem;
        border-radius: 0;

        margin: 0 1rem 2rem 1rem !important;
        background: #E3E3E3;
        opacity: 1;
    }

    .swiper-pagination-bullet-active {
        background: var(--accent);
    }

    .peoples__img {
        filter: grayscale(0);
        transform: scale(1);
    }

    .peoples__item:hover .peoples__img {
        filter: grayscale(0);
        transform: scale(1);
    }

    .peoples__modal {
        width: 100%;
        height: 100%;
        min-height: 100svh;

    }

    .peoples__modal-wrapper {
        width: 100%;
        height: 100%;
        padding: 2rem;
        gap: 3rem;
        flex-direction: column;
    }

    .peoples__modal-svg-wrapper {
        position: fixed;
        right: 2rem;
        top: 2rem;
    }

    .peoples__modal-img-wrapper {
        width: 100%;
    }

    .peoples__modal-content {
        width: 100%;
    }

    .peoples__modal-name {
        font-size: 5rem;
        line-height: 5rem;
        margin-bottom: 2rem;
    }

    .peoples__modal-work {
        font-size: 2.5rem;
        line-height: 3rem;

        margin-bottom: 3rem;
    }

    .peoples__modal-text {
        max-width: 100%;
        width: 100%;
        font-size: 1.75rem;
        line-height: 2.75rem;
        text-wrap: balance;
        margin-bottom: 3rem;
        padding-top: 2.5rem;
        border-top: 0.125rem solid #E3E3E3;
    }




































































































































































    .works {
        align-items: flex-start;
        padding: 15rem 0 5rem 0;
    }

    .works__title {
        margin-left: 2rem;
        max-width: calc(100% - 16rem);
        margin-bottom: 4rem;
    }

    .works__list {
        flex-direction: column;
        gap: 0;
    }

    .works__item {
        width: 100% !important;
        aspect-ratio: 1 / 0.8 !important;
    }

    .works__content {
        top: auto;
        left: 2rem;
        bottom: 2rem;
    }

    .works__name {
        max-width: calc(100% - 8rem);
        font-size: 3rem !important;
        line-height: 3rem !important;
        margin-bottom: 0.5rem !important;
    }

    .works__subname {
        font-size: 2rem !important;
        line-height: 3rem !important;
    }

    .works__item:hover .works__img {
        transform: scale(1);
        opacity: 0.8;
    }

    .works__item:hover * {
        color: var(--white);
    }



    /* 1 */
    .works__item:nth-child(3n+1) {
        margin-right: 8rem;
    }

    .works__item:nth-child(3n+1):after {
        display: none;
    }

    /* 1 */


    /* 2 */
    .works__item:nth-child(3n+2) {
        margin-left: 0;
    }

    .works__item:nth-child(3n+2):after {
        display: none;
    }

    .works__item:nth-child(3n+2) .works__name {
        font-size: 4rem;
        line-height: 4rem;
    }

    /* 2 */


    /* 3 */
    .works__item:nth-child(3n+3) {}

    .works__item:nth-child(3n+3) .works__name {
        font-size: 4rem;
        line-height: 4rem;
    }

    /* 3 */






















































































































































































    .process {
        align-items: flex-start;
        padding: 15rem 0 5rem 0;
    }

    .process__title {
        max-width: calc(100% - 4rem);
        margin-left: 2rem;
        text-align: left;
    }

    .process__subtitle {
        max-width: calc(100% - 4rem);
        margin-left: 2rem;
        text-align: left;

        margin-bottom: 5rem;
    }

    .process__list {
        flex-wrap: nowrap;
        overflow: auto;
        margin-bottom: 3rem;
    }

    .process__item {
        min-width: calc(100% / 1.35);
        width: calc(100% / 1.35);
    }

    .process__list::-webkit-scrollbar-button {
        width: 3px;
        height: 0
    }

    .process__list::-webkit-scrollbar-track {
        background-color: transparent;
        box-shadow: 0 0 3px transparent inset
    }

    .process__list::-webkit-scrollbar-thumb {
        border-radius: 5px;
        background-color: transparent;
        box-shadow: 0 1px 1px transparent inset
    }

    .process__list::-webkit-resizer {
        width: 3px;
        height: 0
    }

    .process__list::-webkit-scrollbar {
        width: 3px;
        height: 3px
    }

    .process__name {
        font-size: 4rem;
        line-height: 4rem;
    }

    .process__text {
        margin-bottom: 3rem;
    }

    .process__line {
        margin-bottom: 6rem;
    }





    .ideas {
        padding: 0 2rem 6rem 2rem;
    }

    .ideas__title {
        text-align: left;
    }

    .ideas__subtitle {
        text-align: left;
        margin-bottom: 3rem;
    }

    .ideas__list {
        margin-bottom: 3rem;
    }

    .ideas__pagination {
        display: flex;
        position: relative;
        padding: 0 2rem;
        justify-content: center;
        bottom: auto !important;
        top: auto !important;
        left: auto !important;
        font-size: 0;

        margin-bottom: 0;
    }

    .ideas__pagination::before {
        display: none;
    }

    .ideas__pagination .swiper-pagination-bullet {
        width: 1rem !important;
        height: 1rem !important;
        border-radius: 0 !important;
        margin: 0 1rem !important;
        background: #E3E3E3 !important;
        opacity: 1 !important;
    }

    .ideas__pagination .swiper-pagination-bullet-active {
        background: var(--accent) !important;
    }
























































































































































































    .project-intro {
        align-items: flex-start;
        padding: 15rem 2rem 6rem 2rem;
    }

    .project-intro__subtitle {
        font-size: 4rem;
        line-height: 4rem;
    }

    .project-img {
        aspect-ratio: 16/11;
        margin-bottom: 6rem;
    }

    .project-content {
        flex-direction: column;
        gap: 6rem;
        padding: 0 2rem;
        margin-bottom: 6rem;
    }

    .project-content__col {
        width: 100%;
    }

    .project-content__col:last-child {
        width: 100%;
    }

    .project-content__name {
        font-size: 4rem;
        line-height: 4rem;
    }

    .project-gallery {
        padding: 0 2rem;
        margin-bottom: 6rem;
    }

    .project-gallery__list {
        margin-bottom: 3rem;
    }

    .about-slider__nav {
        display: none;
    }

    .project-gallery__item {
        aspect-ratio: 16/11;
    }










    .project-gallery__pagination {
        display: flex;
        position: relative;
        padding: 0 2rem;
        justify-content: center;
        bottom: auto !important;
        top: auto !important;
        left: auto !important;
        font-size: 0;

        margin-bottom: 0;
    }

    .project-gallery__pagination::before {
        display: none;
    }

    .project-gallery__pagination .swiper-pagination-bullet {
        width: 1rem !important;
        height: 1rem !important;
        border-radius: 0 !important;
        margin: 0 1rem !important;
        background: #E3E3E3 !important;
        opacity: 1 !important;
    }

    .project-gallery__pagination .swiper-pagination-bullet-active {
        background: var(--accent) !important;
    }











































































































































































    .services {
        align-items: flex-start;
        padding: 15rem 2rem 6rem 2rem;
    }

    .services__subtitle {
        text-align: left;
        margin-bottom: 5rem;
    }

    .services__list {
        flex-direction: column;
        gap: 32px;
    }

    .services__item {
        width: 100%;
    }

    .services__name {
        text-align: left;
        justify-content: flex-start;
        padding: 8px 16px;
    }

    .services__subname {
        text-align: left;
    }

    .create {
        padding: 0  16px;
        align-items: flex-start;
    }

    .create__text {
        text-align: left;
        margin-bottom: 48px;
    }

    .creations {
        background: transparent;
        padding: 0 16px;
        margin-bottom: 48px;
    }

    .creations__list {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 16px;
    }

    .creations__item,
    .creations__center {
        width: 100%;
        aspect-ratio: 1/0.5 !important;
        padding: 32px;
    }

    .creations__name,
    .creations__center .creations__name  {
        font-size: 32px;
        line-height: 32px;
    }

    .creations__item:hover .creations__img {
        transform: scale(1);
        opacity: 0.8;
    }




    .services__modal {
        width: 100%;
        height: 100%;
        min-height: 100svh;

    }

    .services__modal-wrapper {
        width: 100%;
        height: 100%;
        padding: 2rem;
        gap: 2rem;
        flex-direction: column;
    }

    .services__modal-svg-wrapper {
        position: fixed;
        right: 2rem;
        top: 2rem;
    }

    .services__modal-img-wrapper {
        width: 100%;
    }

    .services__modal-content {
        width: 100%;
    }

    .services__modal-name {
        font-size: 5rem;
        line-height: 5rem;
        margin-bottom: 2rem;
    }

    .services__modal-work {
        font-size: 2.5rem;
        line-height: 3rem;

        margin-bottom: 3rem;
    }

    .services__modal-text {
        max-width: 100%;
        width: 100%;
        font-size: 1.75rem;
        line-height: 2.75rem;
        text-wrap: balance;
        margin-bottom: 0;
    }

    .services__modal-svg {
        fill: var(--black);
    }



}