@media (max-width: 992px) {
    .container {
        width: 95%;
        margin: 10px auto;
        padding: 10px;
    }
    .user-preferences-form-container {
        width: 90%;
    }
    .main-heading {
        font-size: 45px;
        margin-bottom: 45px;
    }
    .products-container {
        row-gap: 30px;
        column-gap: 20px;
    }
    /* .product-wrapper {
        width: calc((100% - 20px) / 2);
    } */
    .product-wrapper .product-img {
        width: 170px;
        height: 170px;
    }
    .product-wrapper .product-title {
        font-size: 24px;
    }
    .product-wrapper .product-desc {
        font-size: 15px;
    }
    .product-wrapper .links-wrapper .see-more {
        font-size: 17px;
    }
}
@media (max-width: 768px) {
    .intro {
        padding: 10px;
        /* background: #da855759; */
    }
    .intro .intro-logo img {
        max-width: 160px;
    }
    /* .intro .intro-image {
        max-width: 270px;
        height: 350px;
    } */

    .intro .intro-text {
        gap: 15px;
        width: 100%;
        flex-grow: unset;
    }

    .intro .intro-text .text-bold-light {
        font-size: 27px;
    }

    .intro .intro-text .text-bold-dark {
        font-size: 18px;
    }

    .intro .intro-text .text-normal-dark {
        font-size: 16px;
    }
    .container {
        width: 100%;
        margin: 10px auto;
        padding: 10px;
    }
    .main-heading {
        font-size: 40px;
        margin-bottom: 40px;
    }
    .steps-header {
        margin: 0;
    }
    .steps-header .steps-wrapper .step {
        padding: 0 20px;
    }
    .steps-header .steps-wrapper .step .step-icon svg {
        width: 19px;
        height: 19px;
    }
    .steps-header .steps-wrapper .step .step-icon svg path {
        fill: #eca077;
    }
    .steps-header .steps-wrapper .step.active .step-icon {
        width: 40px;
        height: 40px;
    }
    .steps-header .steps-wrapper .step.active .step-icon svg {
        width: 20px;
        height: 20px;
    }
    .steps-header .steps-wrapper .step .step-desc .step-title {
        font-size: 17px;
    }
    .steps-header .steps-wrapper .step.active {
        gap: 0;
    }
    .steps-header .steps-wrapper .step.active .step-desc .step-num {
        display: none;
    }
    .form-container {
        padding: 20px 0;
    }
    .form-step.active {
        gap: 60px;
    }
    .question-wrapper .question {
        font-size: 18px;
    }
    .question-wrapper .answers-wrapper .answer-wrapper .answer {
        font-size: 18px;
    }
    .question-wrapper .answers-wrapper .answer-wrapper .answer-desc {
        font-size: 15px;
    }
    .result-title {
        font-size: 30px;
    }
    /* .product-wrapper {
        width: 100%;
    } */
    .product-wrapper .product-img {
        width: 200px;
        height: 200px;
    }
    .product-wrapper .product-title {
        font-size: 27px;
    }
    .product-wrapper .links-wrapper .see-more {
        font-size: 17px;
    }
}
@media (max-width: 600px) {
    .intro {
        padding: 30px;
    }
    .intro .intro-image {
        display: none;
    }
}

@media (max-width: 500px) {
    .main-heading {
        font-size: 35px;
        margin-bottom: 30px;
    }
    .gender-options {
        gap: 25px;
    }
    .gender-selection h2 {
        font-size: 30px;
    }
    .gender-selection .show-form {
        width: 100%;
        min-width: 200px;
        max-width: 350px;
    }
    .gender-options span {
        font-size: 20px;
    }
    .steps-header .steps-wrapper .step.active .step-icon {
        width: 35px;
        height: 35px;
    }
    .steps-header {
        padding: 15px 0;
    }
    .steps-header .steps-wrapper .step {
        padding: 0 10px;
    }
    .steps-header .steps-wrapper .step .step-icon svg {
        width: 17px;
        height: 17px;
    }
    .steps-header .steps-wrapper .step.active .step-icon svg {
        width: 19px;
        height: 19px;
    }
    .product-wrapper {
        flex-direction: column;
        gap: 15px;
    }
    .product-wrapper .links-wrapper {
        align-items: center;
    }
    .product-wrapper .product-desc {
        text-align: center;
    }
    .preferences-test-done .start-over {
        width: 100%;
    }
}

@media (max-width: 350px) {
    .steps-header .steps-wrapper .step {
        padding: 0 7px;
    }
}