@media (max-width: 1327px) {
    h2,
    legend,
    .quiz .top-bar {
        margin-bottom: 32px;
    }

    .quiz .inner {
        max-width: calc(var(--width--viewport) - 128px);
    }

    .quiz .personal-info .fields {
        grid-gap: 48px 40px;
    }

    .quiz .progress {
        grid-column-gap: 32px;
    }

    .quiz .loading span::after {
        height: 56px;
        width: 56px;
    }
}




@media (max-height: 716px) and (min-width: 1024px) {
    .page {
        height: auto;
    }

    .introduction {
        box-sizing: border-box;
        padding: 128px 0;
    }
}




@media (max-width: 1023px) {
    body {
        font-size: 21px;
    }

    h1 {
        font-size: 27px;
        line-height: 37px;
    }

    .page {
        height: auto;
    }

    .introduction {
        box-sizing: border-box;
        padding: 64px 0 128px;
    }

    .introduction svg {
        height: 48px;
        width: auto;
    }

    .quiz .progress {
        grid-column-gap: 16px;
    }

    .quiz .personal-info .fields {
        grid-column-gap: 0;
        grid-template-columns: 1fr;
    }

    .quiz .personal-info .fields-group {
        grid-column-start: auto;
    }

    .quiz .checkbox {
        font-size: 22px;
    }

    .quiz .personal-info .note {
        font-size: 18px;
    }

    .quiz .final p,
    .quiz .loading {
        padding-top: 64px;
    }

    .quiz .personal-info fieldset {
        display: block;
    }

    .quiz .personal-info fieldset .radio:not(:last-child) {
        margin-bottom: 18px;
    }
}




@media (max-width: 691px) {
    .introduction {
        max-width: calc(var(--width--viewport) - 48px);
    }
}




@media (max-width: 909px) {
    .quiz .inner {
        max-width: calc(var(--width--viewport) - 48px);
    }
}