@media (max-width: 1024px) {
    .page2-hero__board {
        width: 100%;
        max-width: 996px;
    }
    .hero {
        grid-template-columns: 1fr;
        row-gap: 40px;
        padding-top: 32px;
    }

    .hero__logo {
        margin-bottom: 40px;
    }

    .hero__visual {
        justify-content: center;
    }

    .hero__table {
        max-width: 100%;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .hero {
        padding-top: 88px;
        padding-bottom: 120px;
        text-align: left;
        min-height: auto;
    }

    .hero__content {
        align-items: flex-start;
        max-width: 640px;
        margin: 0 auto;
        text-align: center;
    }

    .hero__content > * {
        margin-left: auto;
        margin-right: auto;
    }

    .hero__logo {
        margin-bottom: 32px;
    }

    .hero__title {
        font-size: 56px;
    }

    .hero__subtitle {
        font-size: 32px;
    }

    .hero__text {
        font-size: 20px;
        max-width: 520px;
    }

    .hero__table {
        max-width: 720px;
        margin: 0 auto;
    }

    .cards {
        justify-content: center;
    }

    .cards__item {
        width: calc((100% - 31px) / 2);
        max-width: 460px;
    }

    .cards__media {
        width: 100%;
        height: auto;
        aspect-ratio: 366 / 250;
    }

    .promo {
        padding: 32px 36px;
    }

    .promo__title {
        font-size: 32px;
    }

    .promo__text {
        font-size: 20px;
    }

    .section__title {
        font-size: 32px;
    }
}

@media (max-width: 768px) {
    .container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .header {
        padding: 10px 0;
    }

    .header__inner {
        gap: 12px;
        padding-left: 20px;
        padding-right: 20px;
    }

    .header__logo {
        height: 32px;
    }

    .header__link {
        font-size: 14px;
    }

    .btn--sm {
        padding: 8px 16px;
        font-size: 12px;
    }

    .hero {
        display: flex;
        flex-direction: column;
        align-items: center;
        min-height: auto;
        padding-top: 56px;
        padding-bottom: 80px;
        text-align: center;
        gap: 0;
    }

    .hero__content {
        display: contents;
    }

    .hero__logo {
        order: 1;
        width: 160px;
        margin: 0 auto 16px;
    }

    .hero__title {
        order: 2;
        font-size: 36px;
        margin: 0 0 12px;
    }

    .hero__subtitle {
        order: 3;
        font-size: 20px;
        margin: 0 0 10px;
    }

    .hero__text {
        order: 4;
        font-size: 16px;
        margin: 0 auto 16px;
        max-width: 320px;
    }

    .hero__visual {
        order: 5;
        width: 100%;
        margin-top: 0;
    }

    .hero__table {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
    }

    .hero__content > .btn--lg {
        order: 6;
        position: relative;
        z-index: 2;
        margin: -75px auto 16px;
    }

    body.page2 {
        padding-top: 60px;
    }

    .page2-header__inner {
        padding-left: 20px;
        padding-right: 20px;
    }

    .btn--lg {
        font-size: 16px;
    }

    .section {
        margin-bottom: 40px;
    }

    .section--steps {
        margin-bottom: 48px;
    }

    .section--features {
        margin-bottom: 48px;
    }

    .section--business {
        margin-bottom: 64px;
    }

    .section__title {
        font-size: 26px;
        margin-bottom: 20px;
        text-align: center;
    }

    .section--promo {
        margin-top: 40px;
    }

    .promo {
        align-items: center;
        text-align: center;
        height: auto;
        min-height: 180px;
        margin-bottom: 48px;
        padding: 24px 20px;
    }

    .promo__title {
        font-size: 28px;
    }

    .promo__text {
        font-size: 16px;
    }

    .cards {
        justify-content: center;
        gap: 20px;
    }

    .cards--grid {
        row-gap: 28px;
    }

    .cards__item {
        width: 100%;
        max-width: var(--card-width);
        text-align: center;
    }

    .cards__media {
        width: 100%;
        max-width: var(--card-width);
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 16px;
    }

    .cards__caption {
        font-size: 16px;
        margin-top: 0;
        text-align: center;
    }

    .copyright {
        margin-top: 64px;
    }

    .social {
        gap: 20px;
        justify-content: center;
    }

    .social__icon {
        width: 56px;
        height: 56px;
    }

    .faq__question {
        font-size: 16px;
    }

    .faq__answer {
        font-size: 16px;
    }

    .faq__trigger {
        padding: 20px 0 20px 25px;
    }
}