/* планшет 1280px - 769px */
@media (min-width: 769px) and (max-width: 1280px) {
    
    :root {
        --grid-columns: 12;
        --page-padding: 32px;
        --grid-gap: 16px;
    }

    /* ui */
    .nav {
        display: none;
    }

    .button.mobile-menu-button {
        display: inline-flex;
    }

    /* хедер */
    .header {
        right: auto;
        width: max-content;
    }
    .header__logo-icon {
        height: 23px;
    }


    /* выпадающее меню */
    .mobile-nav {
        position: absolute;
        top: calc(100% + 12px);
        left: 0;

        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;

        width: 100%;

        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-8px);
        transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
    }

    .mobile-nav.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }

    .mobile-nav__link {
        width: 100%;
        min-height: 41px;

        justify-content: flex-start;
        text-align: left;

        color: rgba(var(--color-black-rgb), 0.35);
    }

    .mobile-nav__link.is-active {
        color: var(--color-black);
    }




    /* I. главная !! */

    /* I.I. hero-блок */
    
    /* логотип + описание */
    .hero-screen__content {
        gap: 24px;
        max-width: calc(100% - 64px);
    }

    .hero-screen__logo--tablet {
        display: block;
        width: clamp(320px, 38vw, 420px);
        transform: translateY(16px);
    }
    .hero-screen__logo--desktop,
    .hero-screen__logo--mobile {
        display: none;
    }


    /* пунктики с подписями */
    .hero-callout {
        width: 300px;
    }

    .hero-callout__text {
        white-space: normal;
        max-width: 150px;
    }

    /* перенос подписей */
    .hero-callout__text--desktop-tablet {
        display: block;
    }

    .hero-callout__text--mobile {
        display: none;
    }

    .hero-callout__text-line {
        display: block;
        white-space: nowrap;
    }

    .hero-callout__text-line + .hero-callout__text-line::before {
        content: none;
    }

    /* верхний правый пункт */
    .hero-callout--top {
        left: auto;
        right: 48px;
        top: calc(50% - 300px);
    }

    .hero-callout--top .hero-callout__circle {
        left: 0;
        bottom: 0;
    }

    .hero-callout--top .hero-callout__line {
        left: 24px;
        bottom: 24px;
        width: 150px;
    }

    .hero-callout--top .hero-callout__text {
        left: 64px;
        top: -12px;
        text-align: left;
    }

    /* нижний левый пункт */
    .hero-callout--bottom {
        left: 72px;
        right: auto;
        bottom: calc(50% - 300px);
    }

    .hero-callout--bottom .hero-callout__circle {
        right: 0;
        top: 0;
    }

    .hero-callout--bottom .hero-callout__line {
        right: 24px;
        top: 24px;
        width: 150px;
    }

   .hero-callout--bottom .hero-callout__text {
        left: 128px;
        right: auto;
        bottom: -12px;
        text-align: left;
    }




    /* I.II. о нас */
    .about-preview__inner {
        row-gap: 48px;
    }

    /* заголовок */
    .about-preview__title {
        grid-column: 1 / 5;
        grid-row: 1;
    }

    /* утп */
    .about-preview__stats {
        grid-column: 1 / 13;
        grid-row: 2;

        display: grid;
        grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
        column-gap: var(--grid-gap);
        row-gap: 0;

        margin-top: 0;
    }

    .about-preview__stat:nth-child(1) {
        grid-column: 1 / 4;
    }

    .about-preview__stat:nth-child(2) {
        grid-column: 7 / 10;
    }

    .about-preview__stat:nth-child(3) {
        grid-column: 10 / 13;
        justify-self: end;
        align-items: flex-end;
        text-align: right;
    }

    /* описание + миссия */
    .about-preview__content {
        grid-column: 1 / 13;
        grid-row: 3;

        display: grid;
        grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
        column-gap: var(--grid-gap);
        row-gap: 0;
    }

    .about-preview__block {
        grid-column: 1 / 6;

        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .about-preview__block--mission {
        grid-column: 7 / 13;
    }

    .about-preview__text,
    .about-preview__block--mission .about-preview__text {
        max-width: 340px;
    }

    /* ста */
    .about-preview__button {
        grid-column: 1 / 13;
        grid-row: 4;
        justify-self: center;
        margin-top: 8px;
    }




    /* I.III. тизер каталога */
    .catalog-teaser {
        --teaser-planet: 280px;
        --teaser-gap: 56px;
    }

    .catalog-teaser__track {
        gap: var(--teaser-gap);
    }

    .catalog-teaser__merch {
        column-gap: var(--grid-gap);
        margin-top: 48px;
    }

    .catalog-teaser__button {
        margin-top: 48px;
    }





    /* I.IV. мероприятия */
    .events-preview__header {
        row-gap: 24px;
        margin-bottom: 32px;
    }

    .events-preview__title {
        grid-column: 1 / 13;
        grid-row: 1;
    }

    .events-preview__category {
        grid-row: 2;
        padding-top: 0;
    }

    .events-preview__category:nth-of-type(1) {
        grid-column: 1 / 4;
    }

    .events-preview__category:nth-of-type(2) {
        grid-column: 5 / 9;
    }

    .events-preview__category:nth-of-type(3) {
        grid-column: 10 / 13;
        justify-self: end;
        text-align: right;
    }

    .events-preview__category .text-microcopy {
        white-space: nowrap;
    }

    .events-preview__card-title,
    .events-preview__card-date,
    .events-preview__card-time {
        font-family: var(--font-main);
        font-size: 32px;
        line-height: 1;
        font-weight: 500;
        letter-spacing: -0.06em;
        text-transform: uppercase;
    }

    .events-preview__card-description-group {
        gap: 16px;
    }

    .events-preview__card-description {
        min-width: 0;
        font-size: 12px;
        line-height: 1.1;
        letter-spacing: -0.03em;
    }

    .events-preview__card {
        height: 520px;
    }

    .events-preview__card-overlay {
        padding: 24px;
    }

    .events-preview__card-line {
        margin: 16px 0;
    }









    /* II. каталог */

    .catalog-hero__header {
        margin-bottom: 48px;
    }

    .catalog-hero__title {
        grid-column: 1 / 13;
        grid-row: 1;
    }

    
    /* II.I. подписи */
   .catalog-hero__labels {
        display: grid;
        grid-column: 1 / 13;
        grid-row: 2;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        column-gap: var(--grid-gap);
        row-gap: 4px;
        margin-top: 24px;
    }

    .catalog-hero__label:nth-child(1)  { grid-column: 1; grid-row: 1; }
    .catalog-hero__label:nth-child(2)  { grid-column: 1; grid-row: 2; }
    .catalog-hero__label:nth-child(3)  { grid-column: 2; grid-row: 2; }
    .catalog-hero__label:nth-child(4)  { grid-column: 2; grid-row: 1; }
    .catalog-hero__label:nth-child(5)  { grid-column: 3; grid-row: 1; }
    .catalog-hero__label:nth-child(6)  { grid-column: 3; grid-row: 2; }
    .catalog-hero__label:nth-child(7)  { grid-column: 4; grid-row: 1; }
    .catalog-hero__label:nth-child(8)  { grid-column: 4; grid-row: 2; }
    .catalog-hero__label:nth-child(13) { grid-column: 5; grid-row: 1; }
    .catalog-hero__label:nth-child(9)  { grid-column: 5; grid-row: 2; }
    .catalog-hero__label:nth-child(11) { grid-column: 6; grid-row: 2; }
    .catalog-hero__label:nth-child(10) { grid-column: 7; grid-row: 1; }
    .catalog-hero__label:nth-child(12) { grid-column: 7; grid-row: 2; }


    /* II.II. планеты */
    .catalog-planets__grid {
        grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
        column-gap: var(--grid-gap);
        row-gap: 48px;
    }

    .catalog-planets__item:nth-child(3n + 1) {
        grid-column: 1 / 5;
        align-items: flex-start;
    }

    .catalog-planets__item:nth-child(3n + 2) {
        grid-column: 5 / 9;
        align-items: center;
    }

    .catalog-planets__item:nth-child(3n) {
        grid-column: 9 / 13;
        align-items: flex-end;
    }

    .catalog-planets__image-wrap,
    .catalog-planets__name {
        width: var(--catalog-planet-width);
    }




    /* II.III. проекты */
    .catalog-projects {
        --proj-card-height: 280px;
    }

    .catalog-projects__grid {
        row-gap: 16px;
    }

    .catalog-projects__card--constructor,
    .catalog-projects__card--instructions {
        grid-column: 1 / 13;
    }

    .catalog-projects__content {
        padding: 24px 0 24px 24px;
    }




    /* II.IV. мерч */
    .catalog-merch__grid {
        row-gap: 48px;
    }








    /* III. мероприятия */

    .events-page .events-preview__card-overlay {
        opacity: 0;
        pointer-events: none;
    }

    .events-page .events-preview__card.is-overlay-visible .events-preview__card-overlay {
        opacity: 1;
        pointer-events: auto;
    }








    /* IV. руководство */
    .guide-hero__cover {
        width: clamp(500px, 60%, 680px);
        top: 20%;
    }

    /* подсказка callout */
    .guide-hero-callout {
        left: calc(50% - 24px);
        top: calc(50% - 220px);
        right: auto;
        bottom: auto;
        transform: none;

        width: 360px;
        height: 90px;
    }

    .guide-hero-callout__circle {
        position: absolute;
        left: 0;
        bottom: 0;
        top: auto;

        width: 48px;
        height: 48px;
    }

    .guide-hero-callout__line {
        position: absolute;
        left: 24px;
        bottom: 24px;

        display: block;
        width: 150px;
        height: auto;
    }

    .guide-hero-callout__text {
        position: absolute;
        left: 188px;
        top: 20px;
        bottom: auto;

        width: auto;
        white-space: nowrap;
        text-align: left;
    }

    .guide-spreads__slide { flex: 0 0 min(72vw, 760px); }
    .guide-spreads__image {
        height: auto;
        width: 100%;
        aspect-ratio: 1412 / 1000;
    }








    /* V. о нас */
    .about-page__hero-video { height: 500px; }
    .about-gallery__image { height: 540px; }

    /* заголовок */
    .about-page__info { margin-top: 60px; }
}