main.quiz__page {
    margin-top: 48px;
    margin-bottom: 100px;

    @media (max-width: 720px) {
        & {
            padding-top: 0;
            margin-top: 32px;
        }
    }
    
    .quiz__wrap {
        .quiz__layout {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            column-gap: 20px;
            row-gap: 16px;
            min-height: 680px;

            @media (max-width: 720px) {
                & {
                    grid-template-columns: repeat(1, 1fr);
                    min-height: auto;
                }
            }

            .quiz__main {
                border-radius: 12px;
                background-color: var(--Gray-1, #FAFAFA);
                padding: 40px clamp(16px, 5vw, 56px);

                .quiz__progress {
                    .quiz__progress-text {
                        color: #000000;
                        font-size: 12px;
                        font-style: normal;
                        font-weight: 400;
                        line-height: 150%;
                        letter-spacing: 0.12px;
                        display: flex;
                        column-gap: 2px;
                        margin-bottom: 8px;
                    }

                    .quiz__progress-line {
                        display: block;
                        width: 100%;
                        height: 12px;
                        border-radius: 6px;
                        background-color: var(--Gray-2, #F2F2F2);
                        position: relative;

                        &:before {
                            content: "";
                            display: block;
                            position: absolute;
                            top: 0;
                            left: 0;
                            height: 100%;
                            width: var(--percent);
                            border-radius: 6px;
                            background-color: var(--Dark-wine-2, #770E16);
                            transition: width .3s ease;
                        }
                    }
                }

                .quiz__content {
                    padding-top: clamp(40px, 4vw, 80px);

                    .quiz__step-head {
                        margin-bottom: 24px;

                        .quiz__step-title {
                            color: var(--Base-Dark, #171717);
                            font-size: clamp(22px, 3vw, 26px);
                            font-style: normal;
                            font-weight: 600;
                            line-height: 130%;
                            letter-spacing: 0.52px;
                        }

                        .quiz__step-description {
                            color: var(--Base-Dark, #171717);
                            font-size: clamp(16px, 3vw, 20px);
                            font-style: normal;
                            font-weight: 400;
                            line-height: 150%;
                            letter-spacing: 0.2px;
                            margin-top: 8px;
                        }
                    }

                    &[data-quiz-step="1"] {
                        .quiz__step-head {
                            margin-bottom: clamp(40px, 4vw, 60px);

                            .quiz__step-title {
                                font-size: clamp(28px, 4vw, 40px);
                                font-weight: 500;
                                line-height: 130%;
                                letter-spacing: 0.8px;
                            }
                        }
                    }

                    .quiz__attributes {
                        display: flex;
                        flex-direction: column;
                        row-gap: 24px;

                        .quiz__attribute {
                            .quiz__attribute-head {
                                margin-bottom: 16px;
                                position: relative;
                                display: flex;
                                align-items: center;
                                column-gap: 10px;

                                .quiz__attribute-title {
                                    color: var(--Base-Dark, #171717);
                                    font-size: clamp(18px, 3vw, 22px);
                                    font-style: normal;
                                    font-weight: 500;
                                    line-height: 130%;
                                    letter-spacing: 0.22px;
                                }

                                .quiz__attribute-hint-target {
                                    color: var(--Gray-8---Main, #383838);
                                    font-size: 12px;
                                    font-style: normal;
                                    font-weight: 400;
                                    line-height: 150%;
                                    letter-spacing: 0.12px;
                                    width: 272px;
                                    padding: 16px 24px;
                                    border-radius: 12px;
                                    background-color: #ffffff;
                                    position: absolute;
                                    left: 0;
                                    z-index: 1;
                                    bottom: calc(100% + 10px);
                                    transform: translateY(10px);
                                    opacity: 0;
                                    visibility: hidden;
                                    transition: all .3s ease;

                                    &:before {
                                        content: "";
                                        display: block;
                                        width: 24px;
                                        height: 24px;
                                        position: absolute;
                                        bottom: -8px;
                                        transform: rotate(45deg);
                                        left: 14px;
                                        background-color: #ffffff;
                                        z-index: -1;
                                    }
                                }

                                .quiz__attribute-hint-trigger {
                                    display: flex;
                                    width: 24px;
                                    height: 24px;
                                    cursor: pointer;
                                    fill: #9A9AA2;

                                    &:hover {
                                        & + .quiz__attribute-hint-target {
                                            transform: translateY(0px);
                                            opacity: 1;
                                            visibility: visible;
                                        }
                                    }
                                }
                            }

                            &.quiz__attribute--choices {
                                .quiz__attribute-values {
                                    display: flex;
                                    flex-wrap: wrap;
                                    row-gap: 16px;
                                    column-gap: 16px;
                                    
                                    .radio__label {
                                        &.quiz__attribute-value {
                                            transition: all .3s ease;
                                            flex: 1 0 calc(50% - 16px);

                                            &.is-loading {
                                                filter: blur(1px);
                                                pointer-events: none;
                                            }

                                            &.disabled {
                                                opacity: .5;
                                                pointer-events: none;
                                            }

                                            .radio__label-wrap {
                                                border-radius: 12px;
                                                border: 1px dashed var(--Gray-4, #D1D1D2);
                                                background-color: var(--Base-White, #FFF);
                                                display: flex;
                                                min-height: 68px;
                                                align-items: center;
                                                width: 100%;
                                                padding: 16px 20px;
                                                column-gap: 10px;

                                                .radio__label-box {
                                                    width: 20px;
                                                    height: 20px;
                                                    flex-shrink: 0;
                                                    border-radius: 4px;
                                                    position: relative;

                                                    &:before {
                                                        content: "";
                                                        background-image: url('../../icons/checkbox.svg');
                                                        background-position: center;
                                                        background-repeat: no-repeat;
                                                        background-size: 10px;
                                                        background-color: transparent;
                                                        position: absolute;
                                                        border-radius: 0;
                                                        margin-top: 0;
                                                        margin-left: 0;
                                                        width: 100%;
                                                        height: 100%;
                                                        opacity: 0;
                                                        transition: opacity .3s ease;
                                                    }
                                                }

                                                @media (max-width: 720px) {
                                                    & {
                                                        justify-content: center;

                                                        .radio__label-box {
                                                            display: none;
                                                        }
                                                    }
                                                }
                                            }

                                            [type="radio"] {
                                                &:checked {
                                                    & + .radio__label-wrap {
                                                        border-style: solid;
                                                        border-color: var(--Dark-wine-Main, #45080D);

                                                        .radio__label-box {
                                                            &:before {
                                                                opacity: 1;
                                                            }
                                                        }
                                                    }
                                                }
                                            }

                                            &.disabled {
                                                opacity: .5;
                                                pointer-events: none;
                                            }
                                        }
                                    }

                                    .checkbox__label {
                                        &.quiz__attribute-value {
                                            transition: all .3s ease;
                                            flex: 1 0 calc(50% - 16px);

                                            &.is-loading {
                                                filter: blur(1px);
                                                pointer-events: none;
                                            }

                                            &.disabled {
                                                opacity: .5;
                                                pointer-events: none;
                                            }

                                            .checkbox__label-wrap {
                                                border-radius: 12px;
                                                border: 1px dashed var(--Gray-4, #D1D1D2);
                                                background-color: var(--Base-White, #FFF);
                                                display: flex;
                                                min-height: 68px;
                                                align-items: center;
                                                width: 100%;
                                                padding: 16px 20px;
                                                column-gap: 10px;

                                                .checkbox__label-box {
                                                    width: 20px;
                                                    height: 20px;
                                                    flex-shrink: 0;
                                                    border-radius: 4px;
                                                    position: relative;

                                                    &:before {
                                                        content: "";
                                                        background-image: url('../../icons/checkbox.svg');
                                                        background-position: center;
                                                        background-repeat: no-repeat;
                                                        background-size: 10px;
                                                        background-color: transparent;
                                                        position: absolute;
                                                        border-radius: 0;
                                                        margin-top: 0;
                                                        margin-left: 0;
                                                        width: 100%;
                                                        height: 100%;
                                                        opacity: 0;
                                                        transition: opacity .3s ease;
                                                    }
                                                }

                                                .checkbox__label-name {
                                                    text-align: center;
                                                }

                                                @media (max-width: 720px) {
                                                    & {
                                                        justify-content: center;

                                                        .checkbox__label-box {
                                                            display: none;
                                                        }
                                                    }
                                                }
                                            }

                                            [type="checkbox"] {
                                                &:checked {
                                                    & + .checkbox__label-wrap {
                                                        border-style: solid;
                                                        border-color: var(--Dark-wine-Main, #45080D);

                                                        .checkbox__label-box {
                                                            &:before {
                                                                opacity: 1;
                                                            }
                                                        }
                                                    }
                                                }
                                            }

                                            &.disabled {
                                                opacity: .5;
                                                pointer-events: none;
                                            }
                                        }
                                    }
                                }

                                &.quiz__attribute--price {
                                    .quiz__attribute-values {
                                        
                                        .radio__label {
                                            &.quiz__attribute-value {
                                                flex: 1 0 calc(33.333% - 16px);
                                                min-width: 120px;
                                            }
                                        }
                                    }
                                }
                            }

                            &.quiz__attribute--range {
                                display: flex;
                                column-gap: 40px;
                                align-items: flex-start;

                                .quiz__attribute-head {
                                    flex-shrink: 0;
                                }

                                .quiz__attribute-range {
                                    flex: auto;
                                    display: flex;
                                    flex-direction: column;
                                    align-items: center;
                                    row-gap: 32px;
                                    padding-top: 8px;

                                    input {
                                        width: 100%;
                                        -webkit-appearance: none;
                                        appearance: none;

                                        &::-webkit-slider-runnable-track {
                                            height: 12px;
                                            background: linear-gradient(to right, var(--Dark-wine-1, #92111C) 0%, var(--Dark-wine-1, #92111C) var(--range-percent, 0%), #F9F0F0 var(--range-percent, 0%), #F9F0F0 100%);
                                            border-radius: 12px;
                                        }

                                        &::-moz-range-track {
                                            height: 12px;
                                            background: linear-gradient(to right, var(--Dark-wine-1, #92111C) 0%, var(--Dark-wine-1, #92111C) var(--range-percent, 0%), #F9F0F0 var(--range-percent, 0%), #F9F0F0 100%);
                                            border-radius: 12px;
                                        }

                                        &::-webkit-slider-thumb {
                                            -webkit-appearance: none;
                                            width: 24px;
                                            height: 24px;
                                            border-radius: 50%;
                                            background-color: #ffffff;
                                            border: solid 8px var(--Dark-wine-1, #92111C);
                                            margin-top: -6px;
                                            cursor: pointer;
                                        }

                                        &::-moz-range-thumb {
                                            width: 24px;
                                            height: 24px;
                                            border-radius: 50%;
                                            background-color: #ffffff;
                                            border: solid 8px var(--Dark-wine-1, #92111C);
                                            margin-top: -6px;
                                            cursor: pointer;
                                        }
                                    }

                                    .quiz__attribute-range-labels {
                                        display: flex;
                                        justify-content: space-between;
                                        padding: 0 4px;
                                        width: 100%;

                                        .quiz__attribute-range-label {
                                            color: var(--Gray-5, #BDBDC2);
                                            text-align: center;
                                            font-size: 14px;
                                            font-style: normal;
                                            font-weight: 400;
                                            line-height: 140%;
                                            letter-spacing: 0.14px;
                                            position: relative;
                                            transition: all .3s ease;

                                            &:before {
                                                content: "";
                                                display: block;
                                                width: 2px;
                                                height: 12px;
                                                background-color: var(--Gray-3, #E5E5E6);
                                                position: absolute;
                                                left: 50%;
                                                transform: translateX(-50%);
                                                bottom: calc(100% + 6px);
                                                transition: all .3s ease;
                                            }

                                            &.active {
                                                color: var(--Dark-wine-Main, #45080D);

                                                &:before {
                                                    background-color: var(--Dark-wine-Main, #45080D);
                                                }
                                            }
                                        }
                                    }
                                }

                                @media (max-width: 720px) {
                                    & {
                                        flex-direction: column;

                                        .quiz__attribute-range {
                                            width: 100%;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }

                .quiz__fields {
                    .quiz__field {
                        .quiz__field-options {
                            display: flex;
                            flex-wrap: wrap;
                            row-gap: 16px;
                            column-gap: 16px;
                            margin-top: 12px;
                        }

                        .quiz__field-option {
                            transition: all .3s ease;
                            flex: 1 0 calc(50% - 16px);
                        }

                        .radio__label {
                            &.quiz__field-option {
                                transition: all .3s ease;
                                flex: 1 0 calc(50% - 16px);

                                .radio__label-wrap {
                                    border-radius: 12px;
                                    border: 1px dashed var(--Gray-4, #D1D1D2);
                                    background-color: var(--Base-White, #FFF);
                                    display: flex;
                                    min-height: 68px;
                                    align-items: center;
                                    width: 100%;
                                    padding: 16px 20px;
                                    column-gap: 10px;

                                    .radio__label-box {
                                        width: 20px;
                                        height: 20px;
                                        flex-shrink: 0;
                                        border-radius: 4px;
                                        position: relative;

                                        &:before {
                                            content: "";
                                            background-image: url('../../icons/checkbox.svg');
                                            background-position: center;
                                            background-repeat: no-repeat;
                                            background-size: 10px;
                                            background-color: transparent;
                                            position: absolute;
                                            border-radius: 0;
                                            margin-top: 0;
                                            margin-left: 0;
                                            width: 100%;
                                            height: 100%;
                                            opacity: 0;
                                            transition: opacity .3s ease;
                                        }
                                    }
                                }

                                [type="radio"] {
                                    &:checked {
                                        & + .radio__label-wrap {
                                            border-style: solid;
                                            border-color: var(--Dark-wine-Main, #45080D);

                                            .radio__label-box {
                                                &:before {
                                                    opacity: 1;
                                                }
                                            }
                                        }
                                    }
                                }

                                &.quiz__field-option--error {
                                    .radio__label-wrap {
                                        border-color: var(--Dark-wine-1, #92111C);
                                    }
                                }

                                @media (max-width: 720px) {
                                    & {
                                        .radio__label-wrap {
                                            justify-content: center;

                                            .radio__label-box {
                                                display: none;
                                            }
                                        }
                                    }
                                }
                            }
                        }

                        .checkbox__label {
                            &.quiz__field-option {
                                transition: all .3s ease;
                                flex: 1 0 calc(50% - 16px);

                                .checkbox__label-wrap {
                                    border-radius: 12px;
                                    border: 1px dashed var(--Gray-4, #D1D1D2);
                                    background-color: var(--Base-White, #FFF);
                                    display: flex;
                                    min-height: 68px;
                                    align-items: center;
                                    width: 100%;
                                    padding: 16px 20px;
                                    column-gap: 10px;

                                    .checkbox__label-box {
                                        width: 20px;
                                        height: 20px;
                                        flex-shrink: 0;
                                        border-radius: 4px;
                                        position: relative;

                                        &:before {
                                            content: "";
                                            background-image: url('../../icons/checkbox.svg');
                                            background-position: center;
                                            background-repeat: no-repeat;
                                            background-size: 10px;
                                            background-color: transparent;
                                            position: absolute;
                                            border-radius: 0;
                                            margin-top: 0;
                                            margin-left: 0;
                                            width: 100%;
                                            height: 100%;
                                            opacity: 0;
                                            transition: opacity .3s ease;
                                        }
                                    }

                                    .checkbox__label-name {
                                        text-align: center;
                                    }
                                }

                                [type="checkbox"] {
                                    &:checked {
                                        & + .checkbox__label-wrap {
                                            border-style: solid;
                                            border-color: var(--Dark-wine-Main, #45080D);

                                            .checkbox__label-box {
                                                &:before {
                                                    opacity: 1;
                                                }
                                            }
                                        }
                                    }
                                }

                                &.quiz__field-option--error {
                                    .checkbox__label-wrap {
                                        border-color: var(--Dark-wine-1, #92111C);
                                    }
                                }

                                @media (max-width: 720px) {
                                    & {
                                        .checkbox__label-wrap {
                                            justify-content: center;

                                            .checkbox__label-box {
                                                display: none;
                                            }
                                        }
                                    }
                                }
                            }
                        }

                        @media (max-width: 720px) {
                            .quiz__field-option {
                                flex-basis: 100%;
                            }
                        }
                    }
                }

                .quiz__actions {
                    margin-top: 40px;
                    display: flex;
                    flex-direction: column;
                    row-gap: 16px;

                    .button {
                        width: 100%;
                    }
                }
            }

            .quiz__aside {
                .quiz__image {
                    height: 100%;
                    border-radius: 12px;
                    overflow: hidden;

                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }
            }
        }

        .quiz__loading-screen {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: clamp(480px, 50vw, 680px);
            position: relative;
            border-radius: 12px;
            overflow: hidden;
            padding: 16px 16px;

            .quiz__loading-background {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

            .quiz__loading-wrap {
                position: relative;
                z-index: 1;
                width: 100%;
                max-width: 538px;
                min-height: clamp(230px, 20vw, 265px);
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                row-gap: 24px;

                .quiz__loading-content {
                    .quiz__loading-title {
                        color: #ffffff;
                        text-align: center;
                        font-size: clamp(22px, 3vw, 40px);
                        font-style: normal;
                        font-weight: 500;
                        line-height: 130%;
                        letter-spacing: 0.8px;
                    }

                    .quiz__loading-description {
                        color: #ffffff;
                        text-align: center;
                        font-size: clamp(14px, 3vw, 20px);
                        font-style: normal;
                        font-weight: 400;
                        line-height: 150%;
                        letter-spacing: 0.2px;
                        margin-top: 8px;
                    }
                }

                .quiz__loading-progress {
                    display: flex;
                    flex-direction: column;
                    align-items: center;

                    .quiz__loading-percent {
                        color: #ffffff;
                        font-size: 12px;
                        font-style: normal;
                        font-weight: 400;
                        line-height: 140%;
                        letter-spacing: 0.12px;
                        margin-bottom: 8px;
                    }

                    .quiz__loading-bar {
                        width: 100%;
                        height: 12px;
                        border-radius: 6px;
                        background-color: rgba(255, 255, 255, 0.20);
                        position: relative;

                        &:before {
                            content: "";
                            display: block;
                            position: absolute;
                            top: 0;
                            left: 0;
                            height: 100%;
                            width: var(--percent);
                            border-radius: 6px;
                            background-color: var(--Light-Red, #B71522);
                            transition: width .3s ease;
                        }
                    }

                    .quiz__loading-time {
                        color: var(--Gray-2, #F2F2F2);
                        text-align: center;
                        font-size: 16px;
                        font-style: normal;
                        font-weight: 400;
                        line-height: 140%;
                        letter-spacing: 0.16px;
                        margin-top: 16px;
                    }
                }
            }
        }

        .quiz__results {

            .quiz__products {
                .quiz__products-title {
                    color: #000000;
                    font-size: clamp(28px, 3vw, 32px);
                    font-style: normal;
                    font-weight: 500;
                    line-height: 140%;
                    letter-spacing: 0.64px;
                    margin-bottom: 32px;
                }

                .quiz__products-group {
                    margin-bottom: 40px;

                    .product__slider-header {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        gap: 16px;
                        margin-bottom: 20px;

                        .quiz__products-group-title {
                            color: #000000;
                            font-size: 20px;
                            font-style: normal;
                            font-weight: 500;
                            line-height: 140%;
                            margin-bottom: 0;
                        }
                    }
                }

                

                .product-card__quiz-match {
                    display: flex;
                    flex-direction: column;
                    gap: 10px;
                    margin-top: 16px;
                    padding-top: 16px;
                    border-top: 1px solid var(--Gray-2, #F2F2F2);

                    .product-card__quiz-match-list {
                        display: flex;
                        flex-direction: column;
                        gap: 8px;
                        
                        

                        .product-card__quiz-match-item {
                            display: flex;
                            align-items: center;
                            column-gap: 6px;

                            .product-card__quiz-match-icon {
                                fill: var(--Dark-wine-1, #92111C);
                                width: 14px;
                                height: 14px;
                                border-radius: 50%;
                                border: solid 1px var(--Dark-wine-1, #92111C);
                                flex-shrink: 0;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                            }

                            .product-card__quiz-match-name {
                                color: var(--Gray-7, #7A7A85);
                                font-size: 12px;
                                font-weight: 400;
                                line-height: 140%;
                                letter-spacing: 0.24px;
                            }

                            .product-card__quiz-match-value {
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                                color: var(--Dark-wine-1, #92111C);
                                font-size: 12px;
                                font-weight: 600;
                                line-height: 140%;
                                letter-spacing: 0.24px;
                            }

                            .product-card__quiz-match-percent {
                                grid-column: 2 / 3;
                                grid-row: 1 / 3;
                                color: var(--Light-Red, #B71522);
                                font-weight: 600;
                            }

                            &.product-card__quiz-match-item--empty {
                                opacity: .2;
                            }
                        }
                    }

                    .product-card__quiz-match-total {
                        color: #000000;
                        font-size: 14px;
                        font-weight: 500;
                        line-height: 140%;
                        display: flex;
                        align-items: center;
                        column-gap: 6px;
                        flex-wrap: wrap;
                        position: relative;
                        margin-top: 12px;
                                                

                        .product-card__quiz-match-name {
                            color: var(--Gray-7, #7A7A85);
                            font-size: 12px;
                            font-weight: 400;
                            line-height: 140%;
                            letter-spacing: 0.24px;
                        }

                        .product-card__quiz-match-value {
                            grid-column: 1 / 2;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            color: var(--Dark-wine-1, #92111C);
                            font-size: 12px;
                            font-weight: 600;
                            line-height: 140%;
                            letter-spacing: 0.24px;
                        }

                        .product-card__quiz-match-percent {
                            width: 100%;
                            height: 4px;
                            position: relative;
                            background-color: var(--Gray-2, #F2F2F2);
                            border-radius: 12px;
                            margin-top: 8px;

                            &:before {
                                content: "";
                                display: block;
                                height: 100%;
                                background-color: var(--Dark-wine-1, #92111C);
                                width: var(--percent);
                                position: absolute;
                                left: 0;
                                bottom: 0;
                                border-radius: 12px;
                            }
                        }
                    }
                }

                .quiz__products-items {
                    display: flex;
                    flex-wrap: wrap;

                    &.slick-initialized {
                        display: block;
                    }

                    @media (max-width: 720px) {
                        & {
                            .product-card {
                                max-width: 100%;
                            }
                        }
                    }
                }
            }
        }
    }
}