:root {
    --color-black: #000;
    --color-white: #fff;
    --color-blue: #012149;
    --color-brand-dark: #043a4b;
    --color-green: #548539;
    --color-light-green: #d1eac9;
    --color-light-green-2: #ecf2e9;
    --color-light-blue: #f1f5fa;
    --color-gray-70: #555;
    --color-gray-5: #e0e0e0;
    --color-gray: #e6e6e6;
    --color-background: #f4f4f4;
    --color-blue-state: #677a92;
    --color-green-state-1: #3b5d28;
    --color-green-state-2: #2a421c
}

@font-face {
    font-family: Involve;
    src: url(../fonts/Involve/Involve-Regular.woff2) format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Involve;
    src: url(../fonts/Involve/Involve-Medium.woff2) format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Involve;
    src: url(../fonts/Involve/Involve-SemiBold.woff2) format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

html, body {
    height: 100%;
    color: var(--color-black);
    background-color: var(--color-background);
    font-family: Involve, Arial, sans-serif;
    position: relative;
    overflow-x: hidden
}

@supports (overflow:clip) {
    html, body {
        overflow-x: clip
    }
}

body > div#app {
    flex-direction: column;
    min-height: 100%;
    display: flex
}

main {
    flex: auto
}

.visually-hidden {
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden
}

.container {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 16px
}

@media screen and (min-width: 768px) {
    .container {
        padding: 0 32px
    }
}

@media screen and (min-width: 1024px) {
    .container {
        padding: 0 60px
    }
}

.documents {
    isolation: isolate;
    padding-top: 80px;
    position: relative
}

@media screen and (min-width: 1024px) {
    .documents {
        padding-top: 150px
    }
}

.documents--cathedral:before {
    content: "";
    z-index: -1;
    background-image: url(./documents-bg-DnmdeyBZ.webp);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 155px;
    height: 134px;
    position: absolute;
    top: 110px;
    right: 0
}

@media screen and (min-width: 1024px) {
    .documents--cathedral:before {
        width: 510px;
        height: 441px;
        top: -42px
    }
}

.documents__head {
    flex-direction: column;
    gap: 12px;
    display: flex
}

@media screen and (min-width: 1024px) {
    .documents__head {
        gap: 18px
    }
}

.documents__title {
    font-size: 32px;
    font-weight: 500;
    line-height: 1.08
}

@media screen and (min-width: 1024px) {
    .documents__title {
        font-size: 52px
    }
}

.documents__title {
    color: var(--color-blue);
    text-transform: uppercase
}

.documents__subtitle {
    font-size: 16px;
    font-weight: 400;
    line-height: 1
}

@media screen and (min-width: 1024px) {
    .documents__subtitle {
        font-size: 18px
    }
}

.documents__subtitle {
    color: var(--color-gray-70);
    line-height: normal
}

.documents__list {
    flex-direction: column;
    gap: 8px;
    margin-top: 32px;
    list-style: none;
    display: flex
}

@media screen and (min-width: 1024px) {
    .documents__list {
        margin-top: 48px
    }
}

.documents__item {
    background-color: var(--color-white);
    border-radius: 10px;
    flex-direction: column;
    gap: 16px;
    padding: 12px 16px;
    display: flex
}

@media screen and (min-width: 1024px) {
    .documents__item {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 24px;
        padding: 12px 12px 12px 24px
    }
}

.documents__name {
    font-size: 16px;
    font-weight: 500;
    line-height: 1
}

@media screen and (min-width: 1024px) {
    .documents__name {
        font-size: 18px
    }
}

.documents__name {
    color: var(--color-blue);
    align-items: center;
    gap: 16px;
    display: flex
}

@media screen and (min-width: 1024px) {
    .documents__name {
        gap: 64px
    }
}

.documents__download {
    font-size: 16px;
    font-weight: 500;
    line-height: 1
}

@media screen and (min-width: 1024px) {
    .documents__download {
        font-size: 18px
    }
}

.documents__download {
    color: var(--color-blue);
    background-color: var(--color-light-blue);
    border-radius: 8px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    text-decoration: none;
    transition: color .3s cubic-bezier(.075, .82, .165, 1), background-color .3s cubic-bezier(.075, .82, .165, 1);
    display: flex
}

.documents__download:hover {
    color: var(--color-white);
    background-color: var(--color-blue-state)
}

.documents__download:focus-visible {
    color: var(--color-white);
    background-color: var(--color-blue-state)
}

.documents__download:active {
    color: var(--color-white);
    background-color: var(--color-blue)
}

.documents__download[aria-disabled=true] {
    pointer-events: none;
    color: var(--color-white);
    background-color: var(--color-gray-5)
}

@media screen and (min-width: 1024px) {
    .documents__download {
        flex-shrink: 0;
        width: 157px
    }
}

.documents__download-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: block
}

.footer {
    padding-top: 32px;
    padding-bottom: 16px
}

@media screen and (min-width: 1024px) {
    .footer {
        padding-top: 50px
    }
}

.footer__inner {
    background-color: var(--color-white);
    border-radius: 25px;
    flex-direction: column;
    gap: 24px;
    padding: 16px;
    display: flex
}

@media screen and (min-width: 1024px) {
    .footer__inner {
        gap: 40px;
        padding: 16px 24px
    }
}

.footer__top {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    display: flex
}

@media screen and (min-width: 1024px) {
    .footer__top {
        flex-direction: row;
        justify-content: space-between;
        align-items: center
    }
}

.footer__logos {
    align-items: center;
    gap: 12px;
    display: flex
}

@media screen and (min-width: 1024px) {
    .footer__logos {
        gap: 32px
    }
}

.footer__logo {
    flex-shrink: 0;
    display: block
}

.footer__logo-image {
    width: 46px;
    height: 60px;
    display: block
}

.footer__nav-list {
    flex-direction: column;
    gap: 12px;
    list-style: none;
    display: flex
}

@media screen and (min-width: 1024px) {
    .footer__nav-list {
        flex-direction: row;
        align-items: center;
        gap: 54px
    }
}

.footer__nav-link {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5
}

@media screen and (min-width: 1024px) {
    .footer__nav-link {
        font-size: 16px
    }
}

.footer__nav-link {
    color: var(--color-black);
    text-decoration: none;
    transition: color .3s cubic-bezier(.075, .82, .165, 1)
}

.footer__nav-link:hover {
    color: var(--color-green)
}

.footer__nav-link:focus-visible {
    color: var(--color-green)
}

@media screen and (min-width: 1024px) {
    .footer__nav-link {
        white-space: nowrap
    }
}

.footer__contacts {
    flex-direction: column;
    gap: 12px;
    display: flex
}

@media screen and (min-width: 1024px) {
    .footer__contacts {
        align-items: flex-end;
        width: 198px
    }
}

.footer__contact {
    font-size: 14px;
    font-weight: 500;
    line-height: 1
}

@media screen and (min-width: 1024px) {
    .footer__contact {
        font-size: 16px
    }
}

.footer__contact {
    color: var(--color-black);
    white-space: nowrap;
    text-decoration: none;
    transition: color .3s cubic-bezier(.075, .82, .165, 1)
}

.footer__contact:hover {
    color: var(--color-green)
}

.footer__contact:focus-visible {
    color: var(--color-green)
}

.footer__bottom {
    border-top: 1px solid var(--color-light-blue);
    flex-direction: column;
    gap: 16px;
    padding-top: 16px;
    display: flex
}

@media screen and (min-width: 1024px) {
    .footer__bottom {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        gap: 24px
    }
}

.footer__author {
    color: var(--color-black);
    letter-spacing: -.02em;
    flex-shrink: 0;
    align-items: center;
    gap: 5px;
    margin-left: auto;
    font-size: 14px;
    text-decoration: none;
    transition: color .3s cubic-bezier(.075, .82, .165, 1);
    display: flex
}

.footer__author:hover {
    color: var(--color-green)
}

.footer__author:focus-visible {
    color: var(--color-green)
}

.footer__author-logo {
    flex-shrink: 0;
    width: 75px;
    height: 24px;
    display: block
}

.header {
    padding-top: 16px
}

@media screen and (min-width: 1024px) {
    .header {
        padding-top: 24px
    }
}

.header__inner {
    background-color: var(--color-white);
    border-radius: 1000px;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    display: flex;
    position: relative
}

@media screen and (min-width: 1024px) {
    .header__inner {
        padding: 16px 24px
    }
}

.header__logos {
    align-items: center;
    gap: 12px;
    display: flex
}

@media screen and (min-width: 1024px) {
    .header__logos {
        gap: 32px
    }
}

.header__logo {
    flex-shrink: 0;
    display: block
}

.header__logo-image {
    width: 20px;
    height: 26px;
    display: block
}

@media screen and (min-width: 1024px) {
    .header__logo-image {
        width: 46px;
        height: 60px
    }
}

.header__nav {
    z-index: 10;
    background-color: var(--color-white);
    border-radius: 24px;
    padding: 16px;
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0
}

.header__nav--open {
    display: block
}

@media screen and (min-width: 1024px) {
    .header__nav {
        background: 0 0;
        border-radius: 0;
        padding: 0;
        display: block;
        position: static
    }
}

.header__nav-list {
    flex-direction: column;
    gap: 16px;
    list-style: none;
    display: flex
}

@media screen and (min-width: 1024px) {
    .header__nav-list {
        flex-direction: row;
        align-items: center;
        gap: 54px
    }
}

.header__nav-link {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5
}

@media screen and (min-width: 1024px) {
    .header__nav-link {
        font-size: 16px
    }
}

.header__nav-link {
    color: var(--color-black);
    text-decoration: none;
    transition: color .3s cubic-bezier(.075, .82, .165, 1)
}

.header__nav-link:hover {
    color: var(--color-green)
}

.header__nav-link:focus-visible {
    color: var(--color-green)
}

@media screen and (min-width: 1024px) {
    .header__nav-link {
        white-space: nowrap
    }
}

.header__contacts {
    display: none
}

@media screen and (min-width: 1024px) {
    .header__contacts {
        flex-direction: column;
        align-items: flex-end;
        gap: 12px;
        width: 198px;
        display: flex
    }
}

.header__contact {
    font-size: 14px;
    font-weight: 500;
    line-height: 1
}

@media screen and (min-width: 1024px) {
    .header__contact {
        font-size: 16px
    }
}

.header__contact {
    color: var(--color-black);
    white-space: nowrap;
    text-decoration: none;
    transition: color .3s cubic-bezier(.075, .82, .165, 1)
}

.header__contact:hover {
    color: var(--color-green)
}

.header__contact:focus-visible {
    color: var(--color-green)
}

.header__burger {
    color: var(--color-blue);
    cursor: pointer;
    background: 0 0;
    border: 0;
    flex-shrink: 0;
    padding: 0;
    display: flex
}

@media screen and (min-width: 1024px) {
    .header__burger {
        display: none
    }
}

.header__burger-icon {
    width: 24px;
    height: 24px;
    display: block
}

.hero {
    padding-top: 8px
}

@media screen and (min-width: 1024px) {
    .hero {
        padding-top: 16px
    }
}

.hero__image {
    aspect-ratio: 328/660;
    object-fit: cover;
    border-radius: 15px;
    width: 100%;
    height: auto;
    display: block
}

@media screen and (min-width: 768px) {
    .hero__image {
        aspect-ratio: 1320/750;
        border-radius: 33px
    }
}

.hero__tags {
    background-color: var(--color-white);
    border-radius: 1000px;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
    padding: 8px 24px;
    display: flex;
    position: relative;
    overflow: hidden
}

@media screen and (min-width: 768px) {
    .hero__tags {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 0
    }
}

@media screen and (min-width: 1024px) {
    .hero__tags {
        align-items: initial;
        justify-content: initial;
        flex-direction: column;
        gap: 8px;
        margin-top: 16px;
        padding: 24px 48px
    }
}

@media screen and (min-width: 1280px) {
    .hero__tags {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 0
    }
}

.hero__tags-row {
    justify-content: space-between;
    align-items: center;
    display: flex
}

@media screen and (min-width: 768px) {
    .hero__tags-row {
        display: contents
    }
}

@media screen and (min-width: 1024px) {
    .hero__tags-row {
        justify-content: space-between;
        align-items: center;
        display: flex
    }
}

@media screen and (min-width: 1280px) {
    .hero__tags-row {
        display: contents
    }
}

.hero__tags-mark {
    color: #f7f7f7;
    font-size: 90px;
    font-weight: 600;
    line-height: 1.12;
    position: absolute;
    top: -16px;
    left: 29.88%
}

@media screen and (min-width: 1024px) {
    .hero__tags-mark {
        color: var(--color-background);
        font-size: 170px;
        top: -58px;
        left: 64.02%
    }
}

.hero__tag {
    font-size: 16px;
    font-weight: 400;
    line-height: 1
}

@media screen and (min-width: 1024px) {
    .hero__tag {
        font-size: 40px
    }
}

.hero__tag {
    color: var(--color-black);
    white-space: nowrap;
    text-transform: uppercase;
    position: relative
}

.hero__tag--accent {
    color: var(--color-green)
}

.hero__tag-dot {
    background-color: var(--color-green);
    border-radius: 50%;
    flex-shrink: 0;
    width: 4px;
    height: 4px;
    position: relative
}

@media screen and (min-width: 1024px) {
    .hero__tag-dot {
        width: 16px;
        height: 16px
    }
}

.penza {
    isolation: isolate;
    padding-top: 80px;
    position: relative
}

@media screen and (min-width: 1024px) {
    .penza {
        padding-top: 150px
    }
}

.penza:before {
    content: "";
    z-index: -1;
    background-image: url(./sports-bg-CnDAQs_W.webp);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 200px;
    height: 194px;
    position: absolute;
    top: 36px;
    left: -77px
}

@media screen and (min-width: 1024px) {
    .penza:before {
        width: 361px;
        height: 347px;
        top: 11px;
        left: -76px
    }
}

.penza__inner {
    flex-direction: column;
    gap: 24px;
    display: flex
}

@media screen and (min-width: 1024px) {
    .penza__inner {
        flex-direction: row
    }
}

.penza__photo {
    aspect-ratio: 328/210
}

@media screen and (min-width: 1024px) {
    .penza__photo {
        aspect-ratio: 648/480;
        flex: 0 0 calc(50% - 12px)
    }
}

.penza__photo-image {
    object-fit: cover;
    border-radius: 15px;
    width: 100%;
    height: 100%;
    display: block
}

@media screen and (min-width: 1024px) {
    .penza__photo-image {
        border-radius: 25px
    }
}

.penza__content {
    flex-direction: column;
    gap: 24px;
    display: flex
}

@media screen and (min-width: 1024px) {
    .penza__content {
        flex: auto;
        justify-content: space-between;
        min-width: 0
    }
}

.penza__head {
    flex-direction: column;
    gap: 12px;
    display: flex
}

@media screen and (min-width: 1024px) {
    .penza__head {
        gap: 24px
    }
}

.penza__title {
    font-size: 32px;
    font-weight: 500;
    line-height: 1.08
}

@media screen and (min-width: 1024px) {
    .penza__title {
        font-size: 52px
    }
}

.penza__title {
    color: var(--color-blue);
    text-transform: uppercase
}

.penza__title-accent {
    color: var(--color-green)
}

.penza__text {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5
}

@media screen and (min-width: 1024px) {
    .penza__text {
        font-size: 16px
    }
}

.penza__text {
    color: var(--color-gray-70)
}

.penza__card {
    background-color: var(--color-light-green-2);
    border-radius: 15px;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    display: flex
}

@media screen and (min-width: 1024px) {
    .penza__card {
        border-radius: 25px;
        flex-direction: row-reverse;
        justify-content: space-between;
        align-items: center;
        gap: 24px;
        padding: 24px
    }
}

.penza__card-image {
    object-fit: cover;
    border-radius: 10px;
    width: 100%;
    height: 159px;
    display: block
}

@media screen and (min-width: 1024px) {
    .penza__card-image {
        flex-shrink: 0;
        width: 253px
    }
}

.penza__card-body {
    flex-direction: column;
    gap: 16px;
    display: flex
}

@media screen and (min-width: 1024px) {
    .penza__card-body {
        gap: 32px;
        max-width: 250px
    }
}

.penza__card-text {
    font-size: 16px;
    font-weight: 400;
    line-height: 1
}

@media screen and (min-width: 1024px) {
    .penza__card-text {
        font-size: 18px
    }
}

.penza__card-text {
    color: var(--color-black);
    line-height: normal
}

.penza__link {
    font-size: 14px;
    font-weight: 500;
    line-height: 1
}

@media screen and (min-width: 1024px) {
    .penza__link {
        font-size: 16px
    }
}

.penza__link {
    color: var(--color-green);
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    text-decoration: none;
    transition: color .3s cubic-bezier(.075, .82, .165, 1);
    display: flex
}

.penza__link:hover {
    color: var(--color-green-state-1)
}

.penza__link:focus-visible {
    color: var(--color-green-state-1)
}

.penza__link:active {
    color: var(--color-green-state-2)
}

.penza__link-arrow {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: block
}

.photos {
    padding-top: 80px
}

@media screen and (min-width: 1024px) {
    .photos {
        padding-top: 150px
    }
}

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

@media screen and (min-width: 1280px) {
    .photos__inner {
        grid-template-columns:449fr 760fr;
        gap: 48px;
        display: grid
    }
}

.photos__intro {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    display: flex
}

@media screen and (min-width: 1024px) {
    .photos__intro {
        gap: 32px
    }
}

@media screen and (min-width: 1280px) {
    .photos__intro {
        justify-content: space-between
    }
}

.photos__title {
    font-size: 32px;
    font-weight: 500;
    line-height: 1.08
}

@media screen and (min-width: 1024px) {
    .photos__title {
        font-size: 52px
    }
}

.photos__title {
    color: var(--color-blue);
    text-transform: uppercase
}

.photos__title-accent {
    color: var(--color-green)
}

.photos__card {
    background-color: var(--color-light-green-2);
    border-radius: 15px;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    padding: 24px;
    display: flex
}

@media screen and (min-width: 1024px) {
    .photos__card {
        border-radius: 25px;
        gap: 32px;
        width: -moz-fit-content;
        width: fit-content;
        max-width: 100%;
        padding: 32px
    }
}

.photos__vk {
    align-items: center;
    gap: 20px;
    display: flex
}

.photos__vk-logo {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: block
}

.photos__vk-text {
    font-size: 16px;
    font-weight: 400;
    line-height: 1
}

@media screen and (min-width: 1024px) {
    .photos__vk-text {
        font-size: 18px
    }
}

.photos__vk-text {
    max-width: 231px;
    color: var(--color-black);
    line-height: normal
}

.photos__button {
    font-size: 16px;
    font-weight: 500;
    line-height: 1
}

@media screen and (min-width: 1024px) {
    .photos__button {
        font-size: 18px
    }
}

.photos__button {
    width: 100%;
    color: var(--color-white);
    background-color: var(--color-green);
    white-space: nowrap;
    border-radius: 1000px;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 24px;
    text-decoration: none;
    transition: background-color .3s cubic-bezier(.075, .82, .165, 1);
    display: flex
}

.photos__button:hover {
    background-color: var(--color-green-state-1)
}

.photos__button:focus-visible {
    background-color: var(--color-green-state-1)
}

.photos__button:active {
    background-color: var(--color-green-state-2)
}

.photos__button[aria-disabled=true] {
    pointer-events: none;
    background-color: var(--color-gray-5)
}

@media screen and (min-width: 1024px) {
    .photos__button {
        justify-content: center;
        gap: 48px;
        width: auto;
        padding: 16px 32px
    }
}

.photos__button-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: block
}

.photos__grid {
    gap: 8px;
    min-width: 0;
    list-style: none;
    display: grid
}

@media screen and (min-width: 768px) {
    .photos__grid {
        aspect-ratio: 760/414;
        grid-template-rows:1fr 1fr;
        grid-template-columns:312fr 200fr 200fr;
        gap: 24px
    }
}

.photos__item {
    min-width: 0;
    height: 210px
}

@media screen and (min-width: 768px) {
    .photos__item {
        height: auto
    }

    .photos__item:first-child {
        grid-row: 1/3
    }

    .photos__item:nth-child(2) {
        grid-column: 2/4
    }
}

.photos__photo {
    object-fit: cover;
    border-radius: 15px;
    width: 100%;
    height: 100%;
    display: block
}

@media screen and (min-width: 768px) {
    .photos__photo {
        border-radius: 25px
    }
}

.program {
    isolation: isolate;
    padding-top: 80px;
    position: relative
}

@media screen and (min-width: 1024px) {
    .program {
        padding-top: 150px
    }
}

.program:before {
    content: "";
    z-index: -1;
    background-image: url(./program-bg-Djs_8D__.webp);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 162px;
    height: 169px;
    position: absolute;
    top: 59px;
    right: 0
}

@media screen and (min-width: 1024px) {
    .program:before {
        width: 437px;
        height: 455px;
        top: -32px
    }
}

.program__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    display: flex
}

@media screen and (min-width: 1024px) {
    .program__head {
        gap: 24px
    }
}

.program__title {
    font-size: 32px;
    font-weight: 500;
    line-height: 1.08
}

@media screen and (min-width: 1024px) {
    .program__title {
        font-size: 52px
    }
}

.program__title {
    color: var(--color-blue);
    text-transform: uppercase
}

.program__title-accent {
    color: var(--color-green)
}

.program__button {
    font-size: 16px;
    font-weight: 500;
    line-height: 1
}

@media screen and (min-width: 1024px) {
    .program__button {
        font-size: 18px
    }
}

.program__button {
    width: 100%;
    color: var(--color-white);
    background-color: var(--color-green);
    border-radius: 1000px;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 24px;
    text-decoration: none;
    transition: background-color .3s cubic-bezier(.075, .82, .165, 1);
    display: flex
}

.program__button:hover {
    background-color: var(--color-green-state-1)
}

.program__button:focus-visible {
    background-color: var(--color-green-state-1)
}

.program__button:active {
    background-color: var(--color-green-state-2)
}

.program__button[aria-disabled=true] {
    pointer-events: none;
    background-color: var(--color-gray-5)
}

@media screen and (min-width: 1024px) {
    .program__button {
        justify-content: center;
        gap: 48px;
        width: auto;
        padding: 16px 32px
    }
}

.program__button-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: block
}

.program__body {
    flex-direction: column;
    gap: 16px;
    margin-top: 32px;
    display: flex
}

@media screen and (min-width: 1024px) {
    .program__body {
        gap: 12px;
        margin-top: 48px
    }

    .program__table-wrap {
        background-color: var(--color-white);
        border-radius: 25px;
        padding: 12px
    }
}

.program__table {
    width: 100%;
    display: block
}

@media screen and (min-width: 1024px) {
    .program__table {
        table-layout: fixed;
        border-collapse: separate;
        border-spacing: 4px;
        display: table
    }
}

.program__thead {
    display: none
}

@media screen and (min-width: 1024px) {
    .program__thead {
        display: table-header-group
    }
}

.program__header-cell {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5
}

@media screen and (min-width: 1024px) {
    .program__header-cell {
        font-size: 16px
    }
}

.program__header-cell {
    color: var(--color-blue);
    background-color: var(--color-light-blue);
    text-align: center;
    vertical-align: middle;
    background-clip: padding-box;
    border-bottom: 12px solid #0000;
    border-radius: 8px;
    padding: 12px 16px;
    font-weight: 400
}

.program__header-cell:first-child {
    width: 4.324%
}

.program__header-cell:nth-child(2) {
    width: 23.585%
}

.program__header-cell:nth-child(3) {
    width: 25.943%
}

.program__header-cell:nth-child(4) {
    width: 18.868%
}

.program__header-cell:nth-child(5) {
    width: 27.28%
}

.program__tbody {
    flex-direction: column;
    gap: 8px;
    display: flex
}

@media screen and (min-width: 1024px) {
    .program__tbody {
        display: table-row-group
    }
}

.program__row {
    background-color: var(--color-light-green-2);
    flex-direction: column;
    gap: 16px;
    padding: 12px;
    display: flex
}

@media screen and (min-width: 1024px) {
    .program__row {
        background: 0 0;
        padding: 0;
        display: table-row
    }
}

.program__row:not(.program__row--open) .program__cell:nth-child(n+3) {
    display: none
}

@media screen and (min-width: 1024px) {
    .program__row:not(.program__row--open) .program__cell:nth-child(n+3) {
        display: table-cell
    }
}

.program__cell {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5
}

@media screen and (min-width: 1024px) {
    .program__cell {
        font-size: 16px
    }
}

.program__cell {
    color: var(--color-blue);
    align-items: flex-start;
    gap: 12px;
    display: flex
}

.program__cell:before {
    content: attr(data-label);
    flex-shrink: 0;
    width: 146px
}

@media screen and (min-width: 1024px) {
    .program__cell {
        background-color: var(--color-light-green-2);
        text-align: center;
        vertical-align: middle;
        border-radius: 8px;
        height: 96px;
        padding: 12px 16px;
        display: table-cell
    }

    .program__cell:before {
        content: none
    }
}

.program__cell--number {
    display: none
}

@media screen and (min-width: 1024px) {
    .program__cell--number {
        display: table-cell
    }

    .program__cell--name {
        text-align: left
    }
}

.program__split {
    flex: auto;
    display: flex
}

.program__split-value {
    text-align: center;
    flex: 1 1 0
}

.program__toggle {
    color: var(--color-brand-dark);
    cursor: pointer;
    background: 0 0;
    border: 0;
    flex-shrink: 0;
    margin-left: auto;
    padding: 0;
    display: flex
}

@media screen and (min-width: 1024px) {
    .program__toggle {
        display: none
    }
}

.program__toggle-icon {
    width: 16px;
    height: 16px;
    transition: transform .3s cubic-bezier(.075, .82, .165, 1);
    display: block;
    transform: rotate(90deg)
}

.program__row--open .program__toggle-icon {
    transform: rotate(-90deg)
}

.program__note {
    background-color: var(--color-white);
    border-radius: 8px;
    align-items: flex-start;
    gap: 12px;
    padding: 8px 12px;
    display: flex
}

@media screen and (min-width: 1024px) {
    .program__note {
        align-items: center;
        gap: 16px;
        padding: 12px
    }
}

.program__note-icon {
    width: 20px;
    height: 20px;
    color: var(--color-blue);
    flex-shrink: 0;
    display: block
}

@media screen and (min-width: 1024px) {
    .program__note-icon {
        width: 24px;
        height: 24px
    }
}

.program__note-text {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5
}

@media screen and (min-width: 1024px) {
    .program__note-text {
        font-size: 16px
    }
}

.program__note-text {
    color: var(--color-blue)
}

.program__note-label {
    font-weight: 500
}

.sports {
    z-index: 1;
    padding-top: 80px;
    position: relative
}

@media screen and (min-width: 1024px) {
    .sports {
        padding-top: 150px
    }
}

.sports:before {
    content: "";
    z-index: -1;
    background-image: url(./sports-bg-CnDAQs_W.webp);
    background-repeat: no-repeat;
    background-size: cover;
    width: 200px;
    height: 194px;
    position: absolute;
    top: 42px;
    right: -78px
}

@media screen and (min-width: 1024px) {
    .sports:before {
        width: 360px;
        height: 347px;
        top: 64px;
        right: -16px
    }
}

.sports__title {
    font-size: 32px;
    font-weight: 500;
    line-height: 1.08
}

@media screen and (min-width: 1024px) {
    .sports__title {
        font-size: 52px
    }
}

.sports__title {
    color: var(--color-blue);
    text-transform: uppercase
}

.sports__list {
    gap: 16px;
    margin-top: 32px;
    list-style: none;
    display: grid
}

@media screen and (min-width: 768px) {
    .sports__list {
        grid-template-columns:repeat(2, 1fr)
    }
}

@media screen and (min-width: 1024px) {
    .sports__list {
        grid-template-columns:repeat(3, 1fr);
        gap: 24px;
        margin-top: 48px
    }
}

@media screen and (min-width: 1280px) {
    .sports__list {
        grid-template-columns:repeat(4, 1fr)
    }
}

.sports__item {
    background-color: var(--color-white);
    border-radius: 16px;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
    display: flex
}

@media screen and (min-width: 1024px) {
    .sports__item {
        border-radius: 20px;
        gap: 48px;
        padding: 32px
    }
}

.sports__head {
    align-items: center;
    gap: 20px;
    display: flex
}

.sports__icon {
    flex-shrink: 0;
    display: block
}

.sports__name {
    font-size: 14px;
    font-weight: 500;
    line-height: 1
}

@media screen and (min-width: 1024px) {
    .sports__name {
        font-size: 16px
    }
}

.sports__name {
    max-width: 156px;
    color: var(--color-blue);
    line-height: normal
}

.sports__link {
    border-top: 1px dashed var(--color-light-blue);
    color: var(--color-blue);
    align-items: center;
    gap: 16px;
    margin-top: auto;
    padding-top: 12px;
    text-decoration: none;
    transition: color .3s cubic-bezier(.075, .82, .165, 1);
    display: flex
}

.sports__link:hover {
    color: var(--color-green)
}

.sports__link:focus-visible {
    color: var(--color-green)
}

@media screen and (min-width: 1024px) {
    .sports__link {
        padding-top: 24px
    }
}

.sports__link-text {
    font-size: 14px;
    font-weight: 500;
    line-height: 1
}

@media screen and (min-width: 1024px) {
    .sports__link-text {
        font-size: 16px
    }
}

.sports__link-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: block
}

.sports__link-arrow {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    margin-left: auto;
    display: block
}

.stages {
    isolation: isolate;
    padding-top: 60px;
    position: relative
}

@media screen and (min-width: 1024px) {
    .stages {
        padding-top: 150px
    }

    .stages:after {
        content: "";
        z-index: -1;
        background-image: url(./stage-wave-DeHr3X66.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        width: 100%;
        height: 480px;
        position: absolute;
        bottom: -155px;
        left: 0
    }
}

.stages__head {
    flex-direction: column;
    gap: 12px;
    display: flex
}

@media screen and (min-width: 1024px) {
    .stages__head {
        gap: 18px
    }
}

.stages__title {
    font-size: 32px;
    font-weight: 500;
    line-height: 1.08
}

@media screen and (min-width: 1024px) {
    .stages__title {
        font-size: 52px
    }
}

.stages__title {
    color: var(--color-blue);
    text-transform: uppercase
}

.stages__subtitle {
    font-size: 16px;
    font-weight: 400;
    line-height: 1
}

@media screen and (min-width: 1024px) {
    .stages__subtitle {
        font-size: 18px
    }
}

.stages__subtitle {
    color: var(--color-gray-70)
}

.stages__list {
    flex-direction: column;
    gap: 16px;
    margin-top: 32px;
    list-style: none;
    display: flex
}

@media screen and (min-width: 1024px) {
    .stages__list {
        gap: 24px;
        margin-top: 48px
    }
}

@media screen and (min-width: 1280px) {
    .stages__list {
        flex-direction: row;
        align-items: flex-end
    }
}

.stages__item {
    background-color: var(--color-white);
    border-radius: 15px;
    flex-direction: column;
    gap: 32px;
    padding: 24px;
    display: flex
}

@media screen and (min-width: 1024px) {
    .stages__item {
        border-radius: 25px;
        flex: 1 1 0;
        gap: 48px;
        padding: 32px
    }
}

.stages__item--final {
    background-image: linear-gradient(#f7fbf585, #f7fbf585), url(./stage-final-bg-C1UGyaz7.webp);
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 100% 100%, 154.25% 100%
}

.stages__top {
    justify-content: space-between;
    align-items: center;
    display: flex
}

.stages__number {
    font-size: 80px;
    font-weight: 600;
    line-height: 1
}

@media screen and (min-width: 1024px) {
    .stages__number {
        font-size: 110px
    }
}

.stages__number {
    color: var(--color-light-blue)
}

.stages__number--final {
    color: var(--color-light-green)
}

.stages__icon {
    height: 60px;
    display: block
}

@media screen and (min-width: 1024px) {
    .stages__icon {
        height: 80px
    }
}

.stages__icon--municipal {
    width: 76px
}

@media screen and (min-width: 1024px) {
    .stages__icon--municipal {
        width: 101px
    }
}

.stages__icon--regional {
    width: 65px
}

@media screen and (min-width: 1024px) {
    .stages__icon--regional {
        width: 87px
    }
}

.stages__icon--final {
    width: 78px
}

@media screen and (min-width: 1024px) {
    .stages__icon--final {
        width: 103px
    }
}

.stages__mark {
    flex-direction: column;
    align-items: center;
    gap: 4px;
    display: flex
}

.stages__mark-text {
    font-size: 18px;
    font-weight: 600;
    line-height: 1
}

@media screen and (min-width: 1024px) {
    .stages__mark-text {
        font-size: 24px
    }
}

.stages__mark-text {
    color: var(--color-green)
}

.stages__body {
    flex-direction: column;
    gap: 24px;
    display: flex
}

@media screen and (min-width: 1024px) {
    .stages__body {
        gap: 32px
    }
}

.stages__heading {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    display: flex
}

.stages__name {
    font-size: 24px;
    font-weight: 500;
    line-height: 1
}

@media screen and (min-width: 1024px) {
    .stages__name {
        font-size: 32px
    }
}

.stages__name {
    color: var(--color-blue);
    text-transform: uppercase
}

.stages__name--final {
    color: var(--color-green)
}

.stages__badge {
    font-size: 14px;
    font-weight: 500;
    line-height: 1
}

@media screen and (min-width: 1024px) {
    .stages__badge {
        font-size: 16px
    }
}

.stages__badge {
    color: var(--color-blue);
    background-color: var(--color-light-blue);
    border-radius: 8px;
    padding: 8px 16px
}

.stages__badge--final {
    font-size: 18px;
    font-weight: 600;
    line-height: 1
}

@media screen and (min-width: 1024px) {
    .stages__badge--final {
        font-size: 24px
    }
}

.stages__badge--final {
    max-width: 143px;
    color: var(--color-green);
    background-color: var(--color-white);
    border-radius: 12px;
    padding: 12px
}

@media screen and (min-width: 1024px) {
    .stages__badge--final {
        max-width: 232px;
        padding: 12px 20px
    }
}

.stages__text {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5
}

@media screen and (min-width: 1024px) {
    .stages__text {
        font-size: 16px
    }
}

.stages__text {
    color: var(--color-gray-70)
}

.union-about {
    padding-top: 80px
}

@media screen and (min-width: 1024px) {
    .union-about {
        padding-top: 100px
    }
}

.union-about__inner {
    display: grid
}

@media screen and (min-width: 1280px) {
    .union-about__inner {
        grid-template-rows:auto 1fr;
        grid-template-columns:536fr 729fr;
        align-items: start;
        column-gap: 48px
    }
}

.union-about__head {
    flex-direction: column;
    gap: 16px;
    display: flex
}

@media screen and (min-width: 1024px) {
    .union-about__head {
        gap: 24px
    }
}

@media screen and (min-width: 1280px) {
    .union-about__head {
        grid-area: 1/1;
        padding-top: 25px
    }
}

.union-about__title {
    font-size: 32px;
    font-weight: 500;
    line-height: 1.08
}

@media screen and (min-width: 1024px) {
    .union-about__title {
        font-size: 52px
    }
}

.union-about__title {
    color: var(--color-blue);
    text-transform: uppercase
}

.union-about__title-accent {
    color: var(--color-green)
}

.union-about__lead {
    font-size: 16px;
    font-weight: 400;
    line-height: 1
}

@media screen and (min-width: 1024px) {
    .union-about__lead {
        font-size: 18px
    }
}

.union-about__lead {
    color: var(--color-gray-70);
    line-height: normal
}

@media screen and (min-width: 1024px) {
    .union-about__lead {
        max-width: 497px
    }
}

.union-about__photo {
    aspect-ratio: 403/275;
    margin: 0 -16px 0 -24px;
    position: relative
}

@media screen and (min-width: 1280px) {
    .union-about__photo {
        aspect-ratio: 729/518;
        grid-area: 1/2/3;
        margin: 0
    }
}

.union-about__photo:after {
    content: "";
    background-image: linear-gradient(to bottom, #f4f4f400 82.9%, var(--color-background) 100%);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0
}

.union-about__photo-image {
    object-fit: cover;
    object-position: left;
    width: 100%;
    height: 100%;
    display: block
}

.union-about__quote {
    background-color: var(--color-white);
    border-radius: 15px;
    flex-direction: column;
    justify-content: center;
    margin-top: -26px;
    margin-left: 6px;
    padding: 24px 14px 14px;
    display: flex;
    position: relative
}

@media screen and (min-width: 1024px) {
    .union-about__quote {
        border-radius: 25px;
        max-width: 354px;
        padding: 32px 24px
    }
}

@media screen and (min-width: 1280px) {
    .union-about__quote {
        border-radius: 25px;
        grid-area: 2/2;
        place-self: end;
        width: 354px;
        margin: 0 45px 31px 0;
        padding: 32px 24px
    }
}

.union-about__quote-badge {
    width: 40px;
    height: 40px;
    color: var(--color-white);
    background-color: var(--color-green);
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute;
    top: -16px;
    left: -5px
}

@media screen and (min-width: 1280px) {
    .union-about__quote-badge {
        width: 58px;
        height: 58px;
        top: -26px;
        left: -18px
    }
}

.union-about__quote-icon {
    width: 25px;
    height: 25px;
    display: block
}

@media screen and (min-width: 1280px) {
    .union-about__quote-icon {
        width: 37px;
        height: 37px
    }
}

.union-about__quote-text {
    font-size: 14px;
    font-weight: 500;
    line-height: 1
}

@media screen and (min-width: 1024px) {
    .union-about__quote-text {
        font-size: 16px
    }
}

.union-about__quote-text {
    color: var(--color-blue);
    line-height: normal
}

@media screen and (min-width: 1280px) {
    .union-about__quote-text {
        max-width: 306px
    }
}

.union-about__years {
    background-color: var(--color-light-green-2);
    border-radius: 15px;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
    padding: 16px;
    display: flex
}

@media screen and (min-width: 1024px) {
    .union-about__years {
        border-radius: 25px;
        justify-content: flex-start;
        gap: 48px;
        width: -moz-fit-content;
        width: fit-content;
        padding: 24px
    }
}

@media screen and (min-width: 1280px) {
    .union-about__years {
        grid-area: 2/1;
        align-self: start;
        margin-top: 48px
    }
}

.union-about__years-count {
    font-size: 80px;
    font-weight: 600;
    line-height: 1
}

@media screen and (min-width: 1024px) {
    .union-about__years-count {
        font-size: 110px
    }
}

.union-about__years-count {
    color: var(--color-green);
    text-align: center;
    white-space: nowrap
}

.union-about__years-unit {
    font-size: 18px;
    font-weight: 600;
    line-height: 1
}

@media screen and (min-width: 1024px) {
    .union-about__years-unit {
        font-size: 24px
    }
}

.union-about__years-unit {
    display: block
}

.union-about__years-divider {
    background-color: var(--color-gray);
    flex-shrink: 0;
    align-self: stretch;
    width: 1px
}

.union-about__years-text {
    font-size: 16px;
    font-weight: 400;
    line-height: 1
}

@media screen and (min-width: 1024px) {
    .union-about__years-text {
        font-size: 18px
    }
}

.union-about__years-text {
    width: 152px;
    color: var(--color-black);
    flex-shrink: 0;
    line-height: normal
}

.union-events {
    padding-top: 80px
}

@media screen and (min-width: 1024px) {
    .union-events {
        padding-top: 150px
    }
}

.union-events__title {
    font-size: 32px;
    font-weight: 500;
    line-height: 1.08
}

@media screen and (min-width: 1024px) {
    .union-events__title {
        font-size: 52px
    }
}

.union-events__title {
    color: var(--color-blue);
    text-transform: uppercase
}

.union-events__list {
    flex-direction: column;
    gap: 24px;
    margin-top: 32px;
    list-style: none;
    display: flex
}

@media screen and (min-width: 1024px) {
    .union-events__list {
        margin-top: 48px
    }
}

.union-events__item {
    background-color: var(--color-white);
    border-radius: 15px;
    flex-direction: column;
    gap: 24px;
    padding: 16px;
    display: flex
}

@media screen and (min-width: 1024px) {
    .union-events__item {
        border-radius: 25px;
        grid-template-columns:max(240px, min(33.3%, 424px)) minmax(0, 1fr);
        align-items: start;
        gap: 24px;
        padding: 24px;
        display: grid
    }
}

.union-events__photo {
    aspect-ratio: 296/164;
    min-height: 0
}

@media screen and (min-width: 1024px) {
    .union-events__photo {
        aspect-ratio: 424/300
    }
}

.union-events__photo-image {
    object-fit: cover;
    border-radius: 10px;
    width: 100%;
    height: 100%;
    display: block
}

@media screen and (min-width: 1024px) {
    .union-events__photo-image {
        border-radius: 20px
    }
}

.union-events__body {
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    display: flex
}

@media screen and (min-width: 1024px) {
    .union-events__body {
        gap: 24px
    }
}

.union-events__head {
    flex-direction: column;
    gap: 8px;
    display: flex
}

@media screen and (min-width: 1024px) {
    .union-events__head {
        gap: 16px
    }
}

.union-events__date {
    font-size: 14px;
    font-weight: 500;
    line-height: 1
}

@media screen and (min-width: 1024px) {
    .union-events__date {
        font-size: 16px
    }
}

.union-events__date {
    color: var(--color-green);
    line-height: normal
}

.union-events__name {
    font-size: 24px;
    font-weight: 500;
    line-height: 1
}

@media screen and (min-width: 1024px) {
    .union-events__name {
        font-size: 32px
    }
}

.union-events__name {
    color: var(--color-blue);
    text-transform: uppercase;
    line-height: normal
}

.union-events__text {
    flex-direction: column;
    gap: 4px;
    display: flex
}

@media screen and (min-width: 1024px) {
    .union-events__text {
        gap: 8px
    }
}

.union-events__paragraph {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5
}

@media screen and (min-width: 1024px) {
    .union-events__paragraph {
        font-size: 16px
    }
}

.union-events__paragraph {
    color: var(--color-gray-70)
}

.union-hero {
    isolation: isolate;
    padding-top: 16px;
    position: relative
}

@media screen and (min-width: 1024px) {
    .union-hero {
        padding-top: 30px
    }
}

.union-hero__inner {
    display: grid;
    position: relative
}

@media screen and (min-width: 1024px) {
    .union-hero__inner {
        grid-template-rows:auto 1fr;
        grid-template-columns:max(300px, min(40.6%, 536px)) minmax(0, 710px);
        align-items: start;
        column-gap: 50px
    }
}

.union-hero__inner:before {
    content: "";
    z-index: -1;
    opacity: .35;
    background-image: url(./pattern-dots-BCcbmIO2.webp);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 198px;
    height: 191px;
    position: absolute;
    top: 225px;
    right: -87px
}

@media screen and (min-width: 1024px) {
    .union-hero__inner:before {
        width: 309px;
        height: 297px;
        top: 0;
        right: -168px
    }

    .union-hero__inner:after {
        content: "";
        z-index: -1;
        aspect-ratio: 1510/503;
        opacity: .5;
        background-image: url(./stage-wave-DeHr3X66.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        width: 114.4%;
        position: absolute;
        top: 261px;
        left: -8.3%
    }
}

.union-hero__head {
    flex-direction: column;
    gap: 12px;
    display: flex
}

@media screen and (min-width: 1024px) {
    .union-hero__head {
        grid-area: 1/2;
        gap: 24px;
        padding-top: 52px
    }
}

.union-hero__head:before {
    content: "";
    z-index: -1;
    background-image: url(./union-xi-B5dv-pOP.webp);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 137px;
    height: 120px;
    position: absolute;
    top: 36px;
    right: -7px
}

@media screen and (min-width: 1024px) {
    .union-hero__head:before {
        content: none
    }
}

.union-hero__title {
    font-size: 36px;
    font-weight: 500;
    line-height: 1.08
}

@media screen and (min-width: 1024px) {
    .union-hero__title {
        font-size: 60px;
        line-height: 1
    }
}

.union-hero__title {
    color: var(--color-blue);
    text-transform: uppercase
}

@media screen and (min-width: 1024px) {
    .union-hero__title {
        line-height: normal
    }
}

.union-hero__title-accent {
    color: var(--color-green);
    display: block
}

.union-hero__lead {
    font-size: 16px;
    font-weight: 400;
    line-height: 1
}

@media screen and (min-width: 1024px) {
    .union-hero__lead {
        font-size: 18px
    }
}

.union-hero__lead {
    color: var(--color-gray-70);
    line-height: normal
}

@media screen and (min-width: 1024px) {
    .union-hero__lead {
        max-width: 497px
    }
}

.union-hero__photo {
    aspect-ratio: 536/653;
    margin-top: 24px;
    position: relative
}

@media screen and (min-width: 1024px) {
    .union-hero__photo {
        grid-area: 1/1/3;
        margin-top: 0
    }

    .union-hero__photo:before {
        content: "";
        z-index: -1;
        background-image: url(./union-xi-B5dv-pOP.webp);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        width: 298px;
        height: 261px;
        position: absolute;
        top: 9px;
        left: calc(100% + 6px)
    }
}

.union-hero__photo:after {
    content: "";
    background-image: linear-gradient(to bottom, #f4f4f400 64.7%, var(--color-background) 100%);
    border-radius: 1000px 1000px 0 0;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0
}

.union-hero__photo-image {
    object-fit: cover;
    border-radius: 1000px 1000px 0 0;
    width: 100%;
    height: 100%;
    display: block
}

.union-hero__chair {
    flex-direction: column;
    gap: 4px;
    margin-top: 10px;
    display: flex
}

@media screen and (min-width: 1024px) {
    .union-hero__chair {
        grid-area: 2/2;
        gap: 12px;
        margin-top: 41px
    }
}

.union-hero__chair-name {
    font-size: 18px;
    font-weight: 600;
    line-height: 1
}

@media screen and (min-width: 1024px) {
    .union-hero__chair-name {
        font-size: 24px
    }
}

.union-hero__chair-name {
    color: var(--color-blue);
    line-height: normal
}

@media screen and (min-width: 1024px) {
    .union-hero__chair-name {
        white-space: nowrap
    }
}

.union-hero__chair-role {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5
}

@media screen and (min-width: 1024px) {
    .union-hero__chair-role {
        font-size: 16px
    }
}

.union-hero__chair-role {
    color: var(--color-black)
}

@media screen and (min-width: 1024px) {
    .union-hero__chair-role {
        max-width: 336px
    }
}

.union-join {
    padding-top: 80px
}

@media screen and (min-width: 1024px) {
    .union-join {
        padding-top: 150px
    }
}

.union-join__about {
    background-color: var(--color-white);
    border-radius: 15px;
    flex-direction: column;
    gap: 32px;
    padding: 24px;
    display: flex
}

@media screen and (min-width: 1280px) {
    .union-join__about {
        border-radius: 25px;
        grid-template-columns:573fr 631fr;
        align-items: center;
        column-gap: 52px;
        padding: 32px;
        display: grid
    }
}

.union-join__about-text {
    flex-direction: column;
    gap: 24px;
    display: flex
}

@media screen and (min-width: 1280px) {
    .union-join__about-text {
        gap: 32px
    }
}

.union-join__title {
    font-size: 32px;
    font-weight: 500;
    line-height: 1.08
}

@media screen and (min-width: 1024px) {
    .union-join__title {
        font-size: 52px
    }
}

.union-join__title {
    color: var(--color-blue);
    text-transform: uppercase
}

.union-join__title-accent {
    color: var(--color-green)
}

.union-join__about-body {
    flex-direction: column;
    gap: 12px;
    display: flex
}

@media screen and (min-width: 1024px) {
    .union-join__about-body {
        gap: 16px
    }
}

.union-join__note {
    font-size: 16px;
    font-weight: 500;
    line-height: 1
}

@media screen and (min-width: 1024px) {
    .union-join__note {
        font-size: 18px
    }
}

.union-join__note {
    color: var(--color-green);
    line-height: normal
}

.union-join__description {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5
}

@media screen and (min-width: 1024px) {
    .union-join__description {
        font-size: 16px
    }
}

.union-join__description {
    color: var(--color-gray-70)
}

@media screen and (min-width: 1280px) {
    .union-join__description {
        max-width: 480px
    }
}

.union-join__gallery {
    flex-direction: column;
    gap: 10px;
    list-style: none;
    display: flex
}

@media screen and (min-width: 1280px) {
    .union-join__gallery {
        aspect-ratio: 631/336;
        grid-template-rows:repeat(2, minmax(0, 1fr));
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap: 24px;
        min-width: 0;
        display: grid
    }
}

.union-join__gallery-item {
    aspect-ratio: 280/164;
    min-height: 0
}

@media screen and (min-width: 1280px) {
    .union-join__gallery-item {
        aspect-ratio: auto;
        min-width: 0
    }

    .union-join__gallery-item:first-child {
        grid-row: 1/3
    }
}

.union-join__photo {
    object-fit: cover;
    border-radius: 10px;
    width: 100%;
    height: 100%;
    display: block
}

@media screen and (min-width: 1280px) {
    .union-join__photo {
        border-radius: 15px
    }

    .union-join__gallery-item:first-child .union-join__photo {
        border-radius: 25px
    }
}

.union-join__contacts {
    background-color: var(--color-white);
    border-radius: 15px;
    flex-direction: column;
    margin-top: 16px;
    display: flex;
    overflow: hidden
}

@media screen and (min-width: 1280px) {
    .union-join__contacts {
        border-radius: 25px;
        flex-direction: row;
        align-items: stretch
    }
}

.union-join__invite {
    background-color: var(--color-light-green-2);
    border-radius: 0 0 15px 15px;
    align-items: center;
    gap: 42px;
    padding: 24px;
    display: flex;
    position: relative;
    overflow: hidden
}

@media screen and (min-width: 1280px) {
    .union-join__invite {
        border-radius: 0 25px 25px 0;
        flex: 0 0 486px;
        padding: 32px
    }
}

.union-join__invite-text {
    max-width: 270px;
    color: var(--color-blue);
    flex-direction: column;
    gap: 16px;
    display: flex
}

@media screen and (min-width: 1280px) {
    .union-join__invite-text {
        gap: 24px
    }
}

.union-join__invite-title {
    font-size: 18px;
    font-weight: 600;
    line-height: 1
}

@media screen and (min-width: 1024px) {
    .union-join__invite-title {
        font-size: 24px
    }
}

.union-join__invite-title {
    max-width: 227px;
    line-height: normal
}

.union-join__invite-note {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5
}

@media screen and (min-width: 1024px) {
    .union-join__invite-note {
        font-size: 16px
    }
}

.union-join__invite-note {
    max-width: 193px
}

@media screen and (min-width: 1280px) {
    .union-join__invite-note {
        max-width: none
    }
}

.union-join__invite-icon {
    width: 98px;
    height: 98px;
    color: var(--color-green);
    background-color: var(--color-light-green);
    box-sizing: border-box;
    border-radius: 50%;
    padding: 23px;
    display: block;
    position: absolute;
    top: 68px;
    left: 239px
}

@media screen and (min-width: 1280px) {
    .union-join__invite-icon {
        width: 139px;
        height: 139px;
        padding: 32px;
        top: 55px;
        left: 359px
    }
}

.union-join__list {
    flex-direction: column;
    gap: 32px;
    padding: 24px;
    list-style: none;
    display: flex
}

@media screen and (min-width: 1280px) {
    .union-join__list {
        flex-direction: row;
        flex: auto;
        justify-content: space-between;
        align-items: flex-start;
        gap: 24px;
        padding: 32px
    }
}

.union-join__contact {
    align-items: center;
    gap: 16px;
    display: flex
}

@media screen and (min-width: 1280px) {
    .union-join__contact {
        flex-direction: column;
        align-items: flex-start
    }
}

.union-join__contact-icon {
    width: 46px;
    height: 46px;
    color: var(--color-blue);
    background-color: var(--color-light-green-2);
    border-radius: 50%;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: flex
}

@media screen and (min-width: 1280px) {
    .union-join__contact-icon {
        width: 40px;
        height: 40px
    }
}

.union-join__contact-glyph {
    width: 28px;
    height: 28px;
    display: block
}

@media screen and (min-width: 1280px) {
    .union-join__contact-glyph {
        width: 24px;
        height: 24px
    }
}

.union-join__contact-body {
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    display: flex
}

@media screen and (min-width: 1280px) {
    .union-join__contact-body {
        gap: 12px
    }
}

.union-join__contact-label {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5
}

@media screen and (min-width: 1024px) {
    .union-join__contact-label {
        font-size: 16px
    }
}

.union-join__contact-label {
    color: var(--color-gray-70)
}

.union-join__contact-value {
    font-size: 16px;
    font-weight: 500;
    line-height: 1
}

@media screen and (min-width: 1024px) {
    .union-join__contact-value {
        font-size: 18px
    }
}

.union-join__contact-value {
    color: var(--color-blue);
    line-height: normal;
    text-decoration: none
}

@media screen and (min-width: 1280px) {
    .union-join__contact-value--multiline {
        max-width: 154px
    }
}

.union-join__contact-value--link {
    transition: color .3s cubic-bezier(.075, .82, .165, 1)
}

.union-join__contact-value--link:hover {
    color: var(--color-green)
}

.union-join__contact-value--link:focus-visible {
    color: var(--color-green)
}

.union-join__social {
    width: 32px;
    height: 32px;
    transition: opacity .3s cubic-bezier(.075, .82, .165, 1);
    display: block
}

.union-join__social:hover {
    opacity: .8
}

.union-join__social:focus-visible {
    opacity: .8
}

.union-join__social-icon {
    width: 100%;
    height: 100%;
    display: block
}

.union-university {
    padding-top: 80px
}

@media screen and (min-width: 1024px) {
    .union-university {
        padding-top: 150px
    }
}

.union-university__head {
    flex-direction: column;
    gap: 12px;
    display: flex
}

@media screen and (min-width: 1024px) {
    .union-university__head {
        gap: 18px
    }
}

.union-university__title {
    font-size: 32px;
    font-weight: 500;
    line-height: 1.08
}

@media screen and (min-width: 1024px) {
    .union-university__title {
        font-size: 52px
    }
}

.union-university__title {
    color: var(--color-blue);
    text-transform: uppercase
}

.union-university__lead {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5
}

@media screen and (min-width: 1024px) {
    .union-university__lead {
        font-size: 16px
    }
}

.union-university__lead {
    color: var(--color-gray-70)
}

@media screen and (min-width: 1024px) {
    .union-university__lead {
        max-width: 695px
    }
}

.union-university__list {
    gap: 16px;
    margin-top: 32px;
    list-style: none;
    display: grid
}

@media screen and (min-width: 1024px) {
    .union-university__list {
        grid-template-columns:repeat(2, minmax(0, 1fr));
        grid-auto-rows: 1fr;
        gap: 24px;
        margin-top: 48px
    }
}

.union-university__item {
    background-color: var(--color-white);
    border-radius: 15px;
    flex-direction: column;
    gap: 32px;
    padding: 24px;
    display: flex;
    position: relative;
    overflow: hidden
}

@media screen and (min-width: 1024px) {
    .union-university__item {
        border-radius: 25px;
        gap: 48px;
        padding: 32px
    }
}

.union-university__number {
    font-size: 80px;
    font-weight: 600;
    line-height: 1
}

@media screen and (min-width: 1024px) {
    .union-university__number {
        font-size: 110px
    }
}

.union-university__number {
    color: var(--color-light-blue);
    line-height: .737
}

.union-university__body {
    flex-direction: column;
    gap: 16px;
    display: flex
}

@media screen and (min-width: 1024px) {
    .union-university__body {
        gap: 24px
    }
}

.union-university__name {
    font-size: 18px;
    font-weight: 600;
    line-height: 1
}

@media screen and (min-width: 1024px) {
    .union-university__name {
        font-size: 24px
    }
}

.union-university__name {
    color: var(--color-blue);
    line-height: normal
}

.union-university__text {
    flex-direction: column;
    gap: 8px;
    display: flex
}

.union-university__paragraph {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5
}

@media screen and (min-width: 1024px) {
    .union-university__paragraph {
        font-size: 16px
    }
}

.union-university__paragraph {
    color: var(--color-gray-70)
}

.union-university__item--decorated .union-university__number {
    color: var(--color-light-green)
}

.union-university__item--decorated .union-university__name {
    color: var(--color-green)
}

.union-university__decor {
    display: none
}

@media screen and (min-width: 1024px) {
    .union-university__decor {
        z-index: 0;
        pointer-events: none;
        -webkit-user-select: none;
        user-select: none;
        background-position: right 100%;
        background-repeat: no-repeat;
        background-size: cover;
        display: block;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0
    }

    .union-university__decor--finance {
        background-image: url(./union-faculty-02-wf1io29F.webp)
    }

    .union-university__decor--law {
        background-image: url(data:image/webp;base64,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)
    }

    .union-university__decor--local {
        background-image: url(./union-faculty-07-CUTPjE_F.webp)
    }
}

.union-university__number, .union-university__body {
    z-index: 1;
    position: relative
}