@media screen and (max-width: 1440px) {
    .volunteers-page__info h1 span:first-of-type {
        margin-left: -228px;
    }

    .volunteers-page__info h1 {
        line-height: 103%;
        margin-bottom: 99px;
    }

    .volunteers-page .main-block .contacts {
        grid-column: 9 / -1;
        display: flex;
        flex-direction: column;
        gap: 44px;
        max-width: fit-content;
    }

    .volunteers-page .main-block .desc {
        grid-column: 4 / span 5;
        margin-right: 72px;
    }

    .volunteers-page .main-block .desc p {
        font-weight: 400;
        font-size: 20px;
        line-height: 130%;
        letter-spacing: -0.03em;
    }

    .volunteers-page__help .title h1:last-of-type {
        margin-left: 114px;
        margin-top: 17px;
    }

    .volunteers-page__help .help-list .list-item .img-container {
        width: 82px;
        height: 82px;
    }

    .volunteers-page__help .title {
        margin-bottom: 62px;
    }

    .volunteers-page__help .help-list .list-item {
        grid-template-columns: 82px 1fr;
    }

    .volunteers-page__help .help-list {
        gap: 36px;
    }

    .volunteers-page__help .photo-block {
        max-height: 448px;
        margin-top: -125px;
    }
}

@media screen and (max-width: 1350px) {

    .volunteers-page__form .left-desc .top-title h1 {
        font-size: 60px;
    }

    .volunteers-page__form .left-desc {
        grid-column: 1 / span 6;
        margin-right: 16px;
    }

    .volunteers-page__form .right-form {
        grid-column: 7 / -1;
    }
}

@media screen and (max-width: 1300px) {
    .volunteers-page__help .title h1:last-of-type {
        margin-left: 50px;
    }

    .volunteers-page__info h1 span:first-of-type {
        margin-left: -218px;
    }

    .volunteers-page__form {
        padding-bottom: 120px;
    }

    .volunteers-page__form .grid-container-1024 {
        grid-template-columns: repeat(4, 1fr);
        margin: 0 16px;
    }

    .volunteers-page__form .left-desc .top-title h1 {
        font-size: 70px;
        line-height: 100%;
        letter-spacing: -0.01em;
    }

    .volunteers-page__form .left-desc {
        padding-top: 117px;
        padding-bottom: 65px;
        margin-left: 15px;
        gap: 16px;
    }

    .volunteers-page__form .left-desc .top-title p {
        font-size: 20px;
        line-height: 130%;
        letter-spacing: -0.02em;
    }

    .volunteers-page__form .left-desc .top-title {
        gap: 25px;
    }

    .volunteers-page__form .right-form {
        grid-column: 1 / -1;
    }

    .volunteers-page__form .left-desc {
        grid-column: 1 / -1;
    }

    .volunteers-page__form .right-form .top-title h4 {
        font-size: 24px;
        line-height: 120%;
        letter-spacing: -0.01em;
    }

    .volunteers-page__form .right-form .top-title {
        margin-bottom: 3px;
    }

    .volunteers-page__form .right-form {
        min-height: unset;
    }

    .volunteers-page__form .form-step p {
        margin-bottom: 34px;
        font-size: 16px;
        letter-spacing: 0;
    }

    .volunteers-page__form .form-buttons {
        margin-top: 24px;
    }

    .volunteers-page__form .form-step .form-group {
        gap: 24px;
    }

    .volunteers-page__form .form-step-2 .form-group {
        row-gap: 15px;
    }

    .volunteers-page__form input[type="text"], .volunteers-page__form input[type="tel"] {
        padding: 16px 8px 16px 17px;
    }

    .volunteers-page__form .form-step-3 .form-group, .volunteers-page__form .form-step-4 .form-group {
        gap: 16px;
    }

    .volunteers-page__form .form-step-3  .form-buttons, .volunteers-page__form .form-step-4  .form-buttons {
        margin-top: 10px;
    }

}

@media screen and (max-width: 1024px) {
    .volunteers-page .hero-design .btn {
        margin-top: 26px;
    }

    .volunteers-page .hero-design {
        padding-bottom: 57px;
        background-position: 85% center;
        background-image: linear-gradient(270deg, rgba(0, 0, 0, 0) 32.66%, rgba(0, 0, 0, 0.2) 77.67%), url(../../img/volunteers/volunteers-hero.jpg);
    }

    .volunteers-page__info h1 {
        grid-column: 1 / -1;
    }

    .volunteers-page__info h1 span:first-of-type {
        margin-left: 7px;
    }

    .volunteers-page__info h1 span:first-of-type::after {
        content: "";
        display: block;
        width: clamp(6.25rem, 0.143rem + 16.96vw, 11rem);
        height: 200px;
        float: left;
    }

    .volunteers-page__info h1 {
        line-height: 102%;
    }

    .volunteers-page .main-block {
        grid-template-columns: 1fr;
    }

    .volunteers-page .main-block .contacts {
        order: -2;
        grid-column: 1 / span 1;
        width: 100%;
        max-width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-bottom: 56px;
    }

    .volunteers-page .main-block .desc {
        grid-column: 1 / -1;
        order: -1;
        margin-right: 0;
        margin-bottom: 40px;
    }

    .volunteers-page .main-block .img-container {
        grid-column: 1 / -1;
        padding-right: 0;
        /*aspect-ratio: 720 / 400;*/
        max-height: 400px;
    }

    .volunteers-page .main-block .contacts .contact-item h5 {
        font-weight: 700;
        font-size: 20px;
        line-height: 130%;
        letter-spacing: -0.02em;
    }

    .volunteers-page .main-block .contacts .contact-item {
        padding-top: 12px;
        padding-right: 35px;
    }

    .volunteers-page .main-block .contacts .contact-item p {
        font-size: 20px;
        line-height: 130%;
        letter-spacing: -0.02em;
    }

    .volunteers-page .main-block .desc p {
        font-size: 20px;
        line-height: 130%;
        letter-spacing: -0.02em;
    }

    .volunteers-page__help .title {
        grid-column: 1 / -1;
        margin-bottom: 53px;
    }

    .volunteers-page__help .title h1:last-of-type {
        margin-left: 152px;
        margin-top: 13px;
    }

    .volunteers-page__help .help-list {
        grid-column: 1 / -1;
        gap: 32px;
        margin-bottom: 53px;
    }

    .volunteers-page__help .photo-block {
        grid-column: 1 / -1;
        margin-top: 0;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr 260px;
        max-height: unset;
    }

    .volunteers-page__help .help-list .list-item h4 {
        font-size: 32px;
        line-height: 110%;
        letter-spacing: -0.01em;
    }

    .volunteers-page__help .help-list .list-item:first-of-type h4 {
        max-width: unset;
    }

    .volunteers-page__help .photo-block .link {
        grid-column: 1 / -1;
        grid-row: 3;
    }

    .volunteers-page__help .photo-block .link a h4 {
        font-size: 32px;
        line-height: 110%;
        letter-spacing: -0.01em;
    }

    .volunteers-page__help .run-row h2 {
        font-size: 52px;
    }

    .volunteers-page__help .run-row {
        padding-top: 108px;
    }

    .volunteers-page__help .vacancies {
        margin: 0 24px 120px;
        grid-template-columns: 1fr 1fr;
        row-gap: 16px;
    }

    .volunteers-page__help .vacancies .item:nth-of-type(4) {
        order: -5;
    }

    .volunteers-page__help .vacancies .item:nth-of-type(5) {
        order: -4;
    }

    .volunteers-page__help .vacancies .item:nth-of-type(1) {
        order: -3;
        grid-column: 1 / -1;
    }

    .volunteers-page__help .vacancies .item h4 {
        font-size: 30px;
        line-height: 120%;
        letter-spacing: 0;
    }

    .volunteers-page__photos .title {
        margin-left: 26px;
        margin-right: 26px;
    }

    .volunteers-page__photos .title h2:first-of-type {
        font-size: 52px;
        line-height: 100%;
        letter-spacing: -0.01em;
        margin-bottom: 18px;
    }

    .volunteers-page__photos .title h2:last-of-type {
        margin-left: 0;
        font-weight: 400;
        font-size: 32px;
        line-height: 110%;
        letter-spacing: -0.01em;
    }

    .volunteers-page__photos .four-photos {
        gap: 10px;
    }

    .volunteers-page__photos .four-photos img:nth-of-type(3) {
        order: -2;
    }

    .volunteers-page__photos .four-photos img:nth-of-type(4) {
        order: -1;
    }

    .volunteers-page__help .photo-block .img-container {
        aspect-ratio: 1 / 1;
    }
}

@media screen and (max-width: 768px) {
    .volunteers-page .gallery-title {
        position: unset;
        transform: unset;
        flex-direction: column;
        margin: 0 24px 32px;
        gap: 18px;
    }

    .volunteers-page .gallery-title .hero-title, .volunteers-page .gallery-title h2 {
        color: var(--black-1000);
    }

    .volunteers-page .gallery-title .hero-title {
        font-size: clamp(3.25rem, 1.58rem + 7.12vw, 5rem);
    }

    .volunteers-page .gallery-title h2 {
        font-size: clamp(1.75rem, 0.319rem + 6.11vw, 3.25rem);
        text-align: center;
        line-height: 102%;
    }

    .volunteers-page__info {
        padding-top: 111px;
    }

    .volunteers-page__help .help-list .list-item h4 {
        font-size: clamp(1.75rem, 1.511rem + 1.02vw, 2rem);
    }

    .volunteers-page__form .left-desc .top-title h1 {
        font-size: clamp(1.75rem, -0.755rem + 10.69vw, 4.375rem);
    }

    .volunteers-page .main .swiper-slide::after, .volunteers-page .swiper-mobile-main .swiper-slide::after {
        display: none;
    }
}

@media screen and (max-width: 576px) {
    .volunteers-page .hero-design {
        background-position: 75% center;
        background-image: linear-gradient(270deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.4) 68.19%), url(../../img/volunteers/volunteers-hero.jpg);
    }

    .hero-design .breadcrumb-item {
        color: var(--grey-400);
    }

    .volunteers-page .hero-design .hero-title {
        margin-top: 6px;
    }

    .volunteers-page .hero-design .btn {
        margin-top: auto;
        padding: 13px 24px;
        font-size: 16px;
        line-height: 130%;
        letter-spacing: 0;
    }

    .volunteers-page__info h1 {
        text-indent: 24px;
        display: inline;
        letter-spacing: 0;
        line-height: 99%;
        margin-bottom: 31px;
    }

    .volunteers-page__info h1 span:first-of-type {
        display: inline;
        margin-left: 0;
        clear: both;
    }

    .volunteers-page__info h1::first-line {
        font-size: 28px;
        text-align: center;
    }

    .volunteers-page__info h1 span:first-of-type::after {
        display: none;
    }

    .volunteers-page__info h1 span:last-of-type {
        display: block;
        margin-left: 23px;
        text-indent: 0;
    }

    .volunteers-page__info {
        padding-top: 70px;
        padding-bottom: 95px;
    }

    .volunteers-page .main-block .contacts {
        display: flex;
        flex-direction: column;
        margin-bottom: 24px;
    }

    .volunteers-page .main-block .contacts .contact-item {
        grid-template-columns: 60px 1fr;
        padding-top: 10px;
        padding-right: 23px;
        row-gap: 0;
        padding-bottom: 19px;
    }

    .volunteers-page .main-block .contacts .contact-item img {
        max-width: 60px;
    }

    .volunteers-page .main-block .contacts .contact-item h5 {
        font-weight: 600;
        font-size: 16px;
        line-height: 130%;
        letter-spacing: 0;
    }

    .volunteers-page .main-block .contacts .contact-item p {
        font-weight: 500;
        font-size: 14px;
        line-height: 120%;
        letter-spacing: 0;
    }

    .volunteers-page .main-block .desc p {
        font-weight: 500;
        font-size: 16px;
        line-height: 130%;
        letter-spacing: 0;
    }

    .volunteers-page .main-block .desc p b {
        font-weight: 600;
        letter-spacing: 0;
    }

    .volunteers-page .main-block .desc {
        gap: 16px;
    }

    .volunteers-page .main-block .img-container {
        /*aspect-ratio: 1 / 1;*/
        max-height: 343px;
    }

    .volunteers-page .gallery-title {
        gap: 9px;
    }

    .volunteers-page .gallery-title h2 {
        letter-spacing: 0;
    }

    .volunteers-page__help .title h1 {
        text-align: center;
    }

    .volunteers-page__help .title h1:last-of-type {
        margin-left: 0;
        margin-top: 6px;
    }

    .volunteers-page__help .help-list .list-item {
        grid-template-columns: 1fr;
        grid-template-rows: 100px 1fr;
        justify-items: center;
        row-gap: 11px;
    }

    .volunteers-page__help .title {
        margin-bottom: 29px;
    }

    .volunteers-page__help .help-list .list-item h4 {
        font-size: 28px;
        text-align: center;
        line-height: 101%;
        letter-spacing: 0;
    }

    .volunteers-page__help .help-list .list-item .img-container {
        width: 100px;
        height: 100px;
    }

    .volunteers-page__help .help-list .list-item:not(:first-of-type) {
        padding-right: 0;
    }

    .volunteers-page__help .help-list {
        gap: 36px;
        margin-bottom: 51px;
    }

    .volunteers-page__help .photo-block {
        gap: 4px;
    }

    .volunteers-page__help .photo-block .link {
        margin-top: 20px;
    }

    .volunteers-page__help .photo-block .link a {
        padding: 16px;
    }

    .volunteers-page__help .photo-block .link a h4 {
        font-size: 28px;
        line-height: 100%;
        letter-spacing: 0;
    }

    .volunteers-page__help .photo-block .link a img {
        max-width: 16px;
        max-height: 16px;
    }

    .volunteers-page__help .run-row h2 {
        font-size: 40px;
        line-height: 100%;
        letter-spacing: -0.01em;
    }

    .volunteers-page__help .run-row {
        padding-top: 73px;
        padding-bottom: 43px;
    }

    .volunteers-page__help .vacancies {
        margin: 0 16px 80px;
        grid-template-columns: 1fr;
        row-gap: 8px;
    }

    .volunteers-page__help .vacancies .item h4{
        font-size: 22px;
        line-height: 120%;
        letter-spacing: 0;
    }

    .volunteers-page__help .vacancies .item {
        padding: 27px 32px;
    }

    .volunteers-page__form .left-desc {
        padding-top: 79px;
        padding-bottom: 40px;
    }

    .volunteers-page__form .left-desc .top-title h1 {
        letter-spacing: 0;
    }

    .volunteers-page__form .left-desc .top-title p {
        font-weight: 500;
        font-size: 16px;
        line-height: 130%;
        letter-spacing: 0;
        max-width: 269px;
    }

    .volunteers-page__form .left-desc .img-container {
        width: 80px;
        height: 80px;
    }

    .volunteers-page__form .left-desc h2 {
        font-size: 22px;
        line-height: 120%;
        letter-spacing: 0;
        max-width: 227px;
    }

    .volunteers-page__form .grid-container-1024 {
        margin: 0 8px;
    }

    .volunteers-page__form .right-form .top-title {
        gap: 20px;
        align-items: start;
        margin-bottom: 10px;
    }

    .volunteers-page__form .right-form {
        padding: 24px 16px;
    }

    .volunteers-page__form .right-form .top-title .step-count {
        font-size: 12px;
        line-height: 110%;
        letter-spacing: 0;
        padding: 7px 10px;
    }

    .volunteers-page__form .right-form .top-title h4 {
        font-size: 22px;
        line-height: 120%;
        letter-spacing: 0;
    }

    .volunteers-page__form .form-step p {
        font-size: 12px;
        line-height: 120%;
        letter-spacing: 0.005em;
        margin-bottom: 27px;
    }

    .volunteers-page__form .form-step .form-field label, .form-group-title {
        font-weight: 600;
        font-size: 16px;
        line-height: 130%;
        letter-spacing: 0;
    }

    .volunteers-page__form .form-step .form-field {
        gap: 5px;
    }

    .volunteers-page__form .form-step .form-group {
        gap: 18px;
    }

    .volunteers-page__form input[type="email"] {
        padding: 15px 8px 15px 16px;
    }

    .volunteers-page__form .form-buttons button {
        padding: 14px 0;
        font-weight: 500;
        font-size: 16px;
        line-height: 130%;
        letter-spacing: 0;
    }

    .volunteers-page__form .form-buttons {
        gap: 4px;
    }

    .volunteers-page__form .form-step-2 .form-group {
        grid-template-columns: 1fr;
        gap: 21px;
    }

    .volunteers-page__form .form-step-2 select {
        padding: 9px 8px 9px 24px;
    }

    .volunteers-page__form .form-step-2 input[type="text"], .volunteers-page__form .form-step-2 input[type="tel"] {
        padding: 15px 8px 15px 24px;
    }

    .volunteers-page__form .form-step-3 .form-field label::before, .volunteers-page__form .form-step-4 .form-field label::before {
        width: 16px;
        height: 16px;
    }

    .volunteers-page__form .form-step-3 .form-field label, .volunteers-page__form .form-step-4 .form-field label {
        font-weight: 500;
        font-size: 14px;
        line-height: 120%;
        letter-spacing: 0;
        padding-left: 19px;
    }

    .volunteers-page__form .form-step-3 .form-group{
        gap: 23px;
    }

    .volunteers-page__form .form-step-4 .form-group {
        gap: 19px;
    }

    .form-group-title {
        margin-bottom: -3px;
    }

    .volunteers-page__form .form-step-4 .form-field label::before {
        top: 50%;
        transform: translateY(-50%);
    }

    .volunteers-page__photos .title {
        margin: 0 16px;
    }

    .volunteers-page__photos {
        padding-top: 30px;
        padding-bottom: 80px;
    }

    .volunteers-page__photos .title h2:first-of-type {
        font-weight: 400;
        font-size: 28px;
        line-height: 100%;
        letter-spacing: 0;
        margin-bottom: 5px;
    }

    .volunteers-page__photos .title h2:last-of-type {
        font-weight: 400;
        font-size: 22px;
        line-height: 120%;
        letter-spacing: 0;
    }

    .volunteers-page__photos .four-photos {
        padding-top: 29px;
        gap: 4px;
    }
}

@media screen and (max-width: 320px) {
    .volunteers-page__info .grid-container-1024, .volunteers-page .hero-design .grid-container {
        margin: 0 8px;
    }
}