.comparator-content{
    font-family: var(--family-title-2);
}
.comparator-page-title{
    background-color: var(--gray-light-4);
    font-size: var(--title-1);
    font-family: var(--family-title);
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}
/* Selections */
.comparator-selection-card{
    padding: 0.5rem 0rem;
    height: 100%;
    gap: 0.125rem;
    border-color: var(--gray-light-2)!important;
}
.comparator-selection-card-buttons{
    padding: 0rem 0.25rem;
    gap: 1.25rem;
}
.comparator-selection-card-button-mobile{
    width: 2rem;
}
.comparator-selection-card-button-desktop{
    font-size: var(--cta-2); 
    /* font-weight: var(--weight-bolder);  */
    font-family: var(--family-title);
    color: var(--gray-dark-4); 
    text-decoration: underline;
}
.comparator-selection-card-miniature{
    /* width: 5.125rem;
    height: 2.952rem; */
}
.comparator-selection-card-information{
    padding: 0rem 0.75rem;
}
.comparator-selection-card-information-title{
    font-size: var(--paragraph-3);
    /* font-weight: var(--weight-bolder); */
    font-family: var(--family-title);
}
.comparator-selection-card-information-price-label{
    font-size: var(--paragraph-3);
}
.comparator-selection-card-information-price{
    font-size: var(--paragraph-3);
    /* font-weight: var(--weight-bolder); */
    font-family: var(--family-title);
}
.comparator-selections-add-button-mobile{
    color: var(--brand-white); 
    background-color: var(--brand); 
    font-size: var(--cta-2); 
    /* font-weight: var(--weight-bolder);  */
    font-family: var(--family-title);
    gap:0.5rem; 
    padding: 0.5rem 2rem;
    margin: 2rem 0.75rem 2.25rem 0.75rem; 
    height: 3rem; 
    border-radius: 0px!important;
}
.comparator-selections-add-button-mobile:hover{
    background-color: var(--brand-dark);
}
.comparator-selections-add-button-mobile:focus{
    background-color: var(--brand-dark);
}
.comparator-selections-add-button-desktop{
    background-color: var(--gray-light-4);
    font-size: var(--paragraph-1);
    font-weight: var(--weight-normal);
    font-family: var(--family-title-2);
    color: var(--gray-dark-4); 
    height: 100%; 
    gap:1.8125rem; 
    padding: 2rem;
}
.comparator-selections-add-button-desktop-circle{
    background-color: var(--brand); 
    width: 8rem; 
    height: 8rem;
    /* padding: 3rem; */
}
.comparator-selections-add-button-desktop-circle:hover{
    background-color: var(--brand-dark); 
}
.comparator-selections-add-button-desktop-circle:focus{
    background-color: var(--brand-dark); 
}
/* Modal */
.comparator-modal{
    background-color: var(--brand-white);
    pointer-events: auto;
    border-radius: 0.5rem 0.5rem 0.125rem 0.125rem; 
    border-bottom: 6px solid var(--gray-light-1);
    font-family: var(--family-title-2);
}
.comparator-modal-content{
    padding: 1.5rem 0.75rem;
    gap: 1.5rem;
}
.comparator-modal-title{
    font-size: var(--title-5); 
    /* font-weight: var(--weight-bolder); */
    font-family: var(--family-title);
    border-bottom: 1px solid var(--gray-light-3);

    padding: 0.375rem 0.75rem;
}
.comparator-modal-text{
    font-size: var(--paragraph-2);
}
.comparator-modal-selectors{
    gap: 1.5rem;
}
.comparator-modal-selector-label{
    font-size: var(--paragraph-3);
}
.comparator-modal-selector{
    padding: 0.5rem 0.75rem; 
    height: 3rem; 
    font-size: var(--paragraph-2); 
    /* font-weight: var(--weight-bold);  */
    font-family: var(--family-title);
    background-color: var(--gray-light-4);
    color: var(--gray-dark-4);
    border-radius: 0%;
}
.comparator-modal-add-button{
    background-color: var(--brand);
    color: var(--brand-white);
    font-size: var(--cta-2); 
    /* font-weight: var(--weight-bolder); */
    font-family: var(--family-title);
}
.comparator-modal-add-button:hover{
    background-color: var(--brand-dark);
}
.comparator-modal-add-button:focus{
    background-color: var(--brand-dark);
}
.comparator-modal-add-button-disabled{
    background-color: var(--gray-light-2);
}
/* Result */
.comparator-feature-button{
    padding: 0.62rem 1.5rem;
    border-color: var(--gray-light-2)!important;
    font-size: var(--title-6); 
    font-family: var(--family-title); 
    /* font-weight: var(--weight-bolder);  */
    color: var(--brand-black);
}
.comparator-feature-button-clicked{
    background-color: var(--gray-light-4);
}
.comparator-result{
    padding-top: 2.25rem;
    padding-bottom: 2.25rem;
}
.comparator-feature{
    font-family: var(--family-title-2); display: none;
}
.comparator-feature-title{
    background-color: var(--gray-light-3); 
    color: var(--brand-black); 
    padding-top: 0.62rem; 
    padding-bottom: 0.62rem; 
    font-size: var(--paragraph-1); 
    /* font-weight: var(--weight-bolder);  */
    font-family: var(--family-title);
    border-color: var(--gray-light-2)!important;
    flex:0 1 auto;
}
.comparator-feature-values{
    background-color: var(--gray-light-4); 
    border-color: var(--gray-light-2)!important; 
    color: var(--gray-dark-4); 
    font-weight: var(--weight-normal);
    flex:0 1 auto;
}
.comparator-feature-value{
    border-color: var(--gray-light-2)!important;

    padding: 0.62rem 0.5rem;
    height: 100%;
}
/* Action buttons */
.comparator-action-buttons{
    padding: 3.75rem 0.75rem;
    gap: 1.5rem;
}
.comparator-action-button{
    padding: 1.25rem;
    background-color: var(--gray-light-4);
    gap: 1.25rem;
}
.comparator-action-button-upper-content{
    gap: 1.25rem;
}
.comparator-action-button-text{
    color: var(--brand-black); 
    font-size: var(--title-6); 
    font-family: var(--family-title);
}
.comparator-action-button-title{
    /* font-weight: var(--weight-bolder); */
    font-family: var(--family-title);
}
.comparator-action-button-subtitle{
    font-weight: var(--weight-normal);
}
.comparator-action-button-link{
    border-width: 1px!important;
    border-color: var(--brand)!important;
    padding: 0.5rem 2rem; font-size: var(--cta-2);
    color: var(--brand);
    text-decoration: none;
    /* font-weight: var(--weight-bolder); */
    /* font-family: var(--family-title-2s); */
    font-family: var(--family-title);
}
@media only screen and (min-width: 768px){
    .comparator-page-title{
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
    .comparator-selections{
        padding-top: 2.5rem;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        margin-left: 25%;
    }
    .comparator-selections-add-button{
        max-width: 28.125rem;
        display: flex;
    }
    .comparator-selections-cards{
        /* width: 66.6%; */
    }
    .comparator-selection-card-miniature{
        /* width: 25rem;
        height: 14.4rem */
    }
    .comparator-modal{

    }
    .comparator-modal-content{
        padding: 1.5rem;
        gap: 1.25rem;
    }
    .comparator-action-buttons{
        padding: 6.25rem 1.5rem;
    }
    .comparator-action-button{
        padding: 2.5rem;
    }
    .comparator-action-button-upper-content{
        gap: 0.625rem;
    }
    .comparator-result{
        padding-top: 4.295rem;
        padding-bottom: 4.295rem;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    .comparator-feature-group-show{
        border-radius: 0%!important;
        border-top: 1px solid var(--gray-dark-4)!important;
        border-bottom: 1px solid var(--gray-dark-4)!important;
    }
    .comparator-feature-title{
        padding-left: 2.62rem;
        padding-right: 2.62rem;
        width: 25%;
    }
    .comparator-feature-value{
        padding: 0.62rem 1.5rem;
        background-color: var(--brand-white);
    }
}
@media only screen and (min-width: 1031px){
    .comparator-selection-card{
        padding: 0.875rem 1.5rem 0.625rem 1.5rem;
    }
    .comparator-selection-card-buttons{
        padding: 0rem;
    }
    .comparator-selection-card-information{
        padding: 0rem;
        gap: 0.375rem;
    }
    .comparator-selection-card-information-title{
        font-size: var(--title-6);
    }
    .comparator-selection-card-information-price{
        font-size: var(--title-3);
        margin-top: 0.25rem;
    }
}
@media only screen and (min-width: 1366px){

}
@media only screen and (min-width: 1920px){

}
.comparator-page-title > h1 {
    font-size: var(--title-1);
    font-family: var(--family-title);
}