/* ==========================================
   LARGE TABLETS
========================================== */

@media (max-width:1100px){

    :root{
        --container:960px;
    }

    .hero h1{
        font-size:62px;
    }

    .section-heading h2{
        font-size:46px;
    }

    .comparison-grid{
        gap:18px;
    }

    .product-preview{
        padding-inline:22px;
    }

    .product-preview__image-wrapper{
        height:270px;
    }

    .product-preview__image{
        max-width:235px;
        max-height:250px;
    }

    .specification{
        padding-inline:22px;
    }

    .result-card__main{
        gap:40px;
        padding:52px;
    }

    .result-card__header{
        padding-inline:52px;
    }

    .secondary-recommendation{
        margin-inline:52px;
        margin-bottom:52px;
    }

}


/* ==========================================
   TABLETS
========================================== */

@media (max-width:900px){

    section{
        padding:80px 0;
    }

    .container{
        width:min(100% - 36px,var(--container));
    }

    .site-header__content{
        height:68px;
    }

    .site-navigation{
        gap:24px;
    }

    .hero{
        padding-top:96px;
        padding-bottom:110px;
    }

    .hero__content{
        max-width:700px;
    }

    .hero h1{
        font-size:54px;
    }

    .hero__description{
        font-size:20px;
    }

    .section-heading{
        margin-bottom:54px;
    }

    .section-heading h2{
        font-size:42px;
    }

    .section-heading p{
        font-size:18px;
    }

    .comparison-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:18px;
    }

    .quiz-introduction h2{
        font-size:46px;
    }

    .quiz-section .quiz-container{
        padding:42px;
    }

    .quiz-header{
        align-items:flex-start;
    }

    .quiz-header h2{
        font-size:38px;
    }

    .quiz-question{
        min-height:360px;
    }

    .quiz-question__title{
        font-size:30px;
    }

    .result-card__header h2{
        font-size:48px;
    }

    .result-card__main{
        grid-template-columns:1fr;
    }

    .result-product__image-wrapper{
        min-height:390px;
    }

    .result-product__image{
        max-width:360px;
        max-height:350px;
    }

    .product-specifications .specification:nth-child(1){
        min-height:150px;
    }

    .product-specifications .specification:nth-child(2){
        min-height:170px;
    }

    .product-specifications .specification:nth-child(3){
        min-height:160px;
    }

    .product-specifications .specification:nth-child(4){
        min-height:130px;
    }

    .product-specifications .specification:nth-child(5){
        min-height:180px;
    }

    .product-specifications .specification:nth-child(6){
        min-height:150px;
    }

    .product-preview__name{
        display:flex;
        align-items:flex-end;
        justify-content:center;

        min-height:52px;

        font-size:21px;
        line-height:1.15;
        text-align:center;
    }

}


/* ==========================================
   MOBILE
========================================== */

@media (max-width:680px){

    :root{
        --fs-md:16px;
    }

    section{
        padding:64px 0;
    }

    .container{
        width:min(100% - 28px,var(--container));
    }

    .site-header{
        backdrop-filter:blur(14px);
    }

    .site-header__content{
        height:64px;
    }

    .site-logo img{
        height:28px;
    }

    .site-navigation{
        gap:16px;
    }

    .site-navigation a{
        font-size:13px;
    }

    .hero{
        padding-top:72px;
        padding-bottom:84px;
    }

    .hero h1{
        font-size:42px;
        line-height:1.06;
    }

    .hero__description{
        margin-bottom:34px;
        font-size:18px;
        line-height:1.5;
    }

    .hero__actions{

        flex-direction:column;

        width:100%;

        margin-top:34px;
    }

    .hero__actions .button{

        width:100%;
        max-width:340px;
    }

    .eyebrow{
        font-size:13px;
    }

    .section-heading{
        margin-bottom:42px;
    }

    .section-heading h2{
        font-size:36px;
    }

    .section-heading p{
        font-size:17px;
    }

    .button{
        min-height:50px;
        padding-inline:22px;
    }

    .comparison-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:12px;
    }

    .comparison-column{
        border-radius:24px;
    }

    .product-selector{
        padding:14px 12px 0;
    }

    .product-selector__select{
        height:46px;
        padding-right:34px;
        padding-left:12px;

        font-size:12px;

        background-position:
            calc(100% - 15px) 19px,
            calc(100% - 10px) 19px;

        background-size:5px 5px;
    }

    .product-preview{
        padding:18px 12px 24px;
    }

    .product-preview__image-wrapper{
        height:165px;
        margin-bottom:18px;
    }

    .product-preview__image{
        max-width:145px;
        max-height:155px;
    }

    .product-preview__name{
        display:flex;
        align-items:flex-end;
        justify-content:center;

        min-height:52px;

        font-size:21px;
        line-height:1.15;
        text-align:center;
    }

    .product-preview__subtitle{
        display:flex;
        align-items:flex-start;
        justify-content:center;

        min-height:44px;
        margin-bottom:18px;

        font-size:13px;
        line-height:1.35;
        text-align:center;
    }

    .product-colors{
        margin-bottom:22px;
    }

    .product-colors__options{
        gap:6px;
    }

    .color-option{
        width:29px;
        height:29px;
        padding:3px;
    }

    .color-option__swatch{
        width:19px;
        height:19px;
    }

    .product-preview__actions{
        flex-direction:column;
        gap:8px;
    }

    .product-preview__actions .button,
    .product-preview__actions .text-link{
        width:100%;
    }

    .product-preview__actions .button{
        min-height:42px;
        padding-inline:10px;

        font-size:13px;
    }

    .product-preview__actions .text-link{
        padding:7px;

        font-size:13px;
    }

    .specification{
        padding:18px 12px;
    }

    .specification dt{
        font-size:11px;
    }

    .specification dd{
        font-size:12px;
        line-height:1.45;
    }


    .rating{
        gap:3px;
    }

    .rating__bar{
        width:calc((100% - 12px) / 5);
        height:5px;
    }

    .rating__description{
        margin-top:8px;

        font-size:11px;
        line-height:1.4;
    }

    .specification--rating{
        min-height:auto;
    }

    .rating-legend{
        gap:18px;
        margin-top:28px;
    }

    .quiz-introduction h2{
        font-size:38px;
    }

    .quiz-introduction p{
        font-size:17px;
    }

    .quiz-section{
        padding-top:72px;
    }

    .quiz-section .quiz-container{
        padding:28px 22px;
        border-radius:24px;
    }

    .quiz-header{
        flex-direction:column;
        gap:12px;
        margin-bottom:22px;
    }

    .quiz-header h2{
        font-size:33px;
    }

    .quiz-progress-text{
        padding-bottom:0;
    }

    .quiz-progress{
        margin-bottom:38px;
    }

    .quiz-question{
        min-height:440px;
    }

    .quiz-question__title{
        margin-bottom:28px;
        font-size:27px;
    }

    .quiz-options{
        grid-template-columns:1fr;
    }

    .quiz-option__content{
        min-height:70px;
        padding:16px 18px;
    }

    .quiz-actions{
        margin-top:28px;
        padding-top:24px;
    }

    .quiz-actions .button{
        min-width:0;
        flex:1;
    }

    .result-section{
        padding-top:24px;
        padding-bottom:80px;
    }

    .result-card{
        border-radius:24px;
    }

    .result-card__header{
        padding:42px 22px 36px;
    }

    .result-card__header h2{
        font-size:39px;
    }

    .result-card__headline{
        font-size:18px;
    }

    .result-card__main{
        gap:34px;
        padding:28px 22px 34px;
    }

    .result-product__image-wrapper{
        min-height:300px;
        padding:22px;
        border-radius:22px;
    }

    .result-product__image{
        max-width:280px;
        max-height:270px;
    }

    .result-content__description{
        font-size:17px;
    }

    .result-ratings{
        padding:22px;
    }

    .result-actions{
        flex-direction:column;
    }

    .result-actions .button{
        width:100%;
    }

    .secondary-recommendation{
        grid-template-columns:92px minmax(0,1fr);
        gap:18px;

        margin:0 22px 28px;
        padding:20px;

        border-radius:20px;
    }

    .secondary-recommendation__image-wrapper{
        height:86px;
    }

    .secondary-recommendation__image-wrapper img{
        max-width:82px;
        max-height:80px;
    }

    .secondary-recommendation__content h3{
        font-size:21px;
    }

    .site-footer{
        margin-top:80px;
        padding:56px 0;
    }

    .product-specifications .specification:nth-child(1){
        min-height:130px;
    }

    .product-specifications .specification:nth-child(2){
        min-height:130px;
    }

    .product-specifications .specification:nth-child(3){
        min-height:120px;
    }

    .product-specifications .specification:nth-child(4){
        min-height:120px;
    }

    .product-specifications .specification:nth-child(5){
        min-height:170px;
    }

    .product-specifications .specification:nth-child(6){
        min-height:170px;
    }

}


/* ==========================================
   SMALL MOBILE
========================================== */

@media (max-width:430px){

    .container{
        width:min(100% - 22px,var(--container));
    }

    .site-navigation a:first-child{
        display:none;
    }

    .hero h1{
        font-size:36px;
    }

    .hero__description{
        font-size:17px;
    }

    .section-heading h2{
        font-size:32px;
    }

    .quiz-introduction h2{
        font-size:34px;
    }

    .quiz-section .quiz-container{
        padding-inline:18px;
    }

    .quiz-header h2{
        font-size:29px;
    }

    .quiz-question{
        min-height:470px;
    }

    .quiz-question__title{
        font-size:24px;
    }

    .quiz-actions{
        flex-direction:column-reverse;
    }

    .quiz-actions .button{
        width:100%;
    }

    .result-card__header h2{
        font-size:34px;
    }

    .result-card__profile{
        display:flex;
        justify-content:center;
        flex-wrap:wrap;
    }

    .secondary-recommendation{
        grid-template-columns:1fr;
        text-align:center;
    }

    .secondary-recommendation__image-wrapper{
        height:100px;
    }

}