@charset "utf-8";
.sort_lists{
    margin: 0 0 60px;
}

.sort_lists_category, .sort_lists_floor{
    justify-content: space-between;
}

.sort_lists_category{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 30px 10px;
}

.sort_lists_floor{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13.066vw, 1fr));
    grid-template-rows: minmax(13.066vw, 1fr);
    gap: 5.333vw;
}

.sort_lists a{
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    background-color: #F8F8F7;
    border: 1px solid var(--color-primary);
    transition: opacity var(--hover-animation);
}

.sort_lists a:not(.is-active), .btn_primary .sort_btn{
    cursor: pointer;
}

.sort_lists_category a{
    padding: 0 5px;
}

.sort_lists_floor a{
    display: grid;
    place-content: center;
    margin: 0;
}

.sort_lists a:not(.is-active):hover{
    opacity: var(--hover-opacity);
}

.sort_lists .is-active{
    background-color: var(--color-border);
    cursor: auto;
}

.icon_cat_img{
    flex-grow: 1;
    display: grid;
    place-content: center;
    padding: 14px 0 0;
}

.icon_cat_img svg{
    width: 25%;
    margin: 0 auto;
}

.sort_lists_category a:nth-of-type(2) svg{
    width: 66%;
}

.sort_lists_category a:nth-of-type(3) svg{
    width: 36%;
}

.sort_lists_category a:nth-of-type(4) svg{
    width: 40%;
}

.sort_lists_category a:nth-of-type(5) svg{
    width: 64%;
}

.sort_lists_category a:nth-of-type(6) svg{
    width: 28%;
}

.btn_sort_text{
    text-align: center;
    align-self: center;
    display: grid;
    place-content: center;
    line-height: 1.2;
}

.sort_lists_category .btn_sort_text{
    font-size: clamp(0.813rem, 0.612rem + 0.8vw, 1.125rem);
    letter-spacing: .025em;
    font-weight: var(--font-semibold);
    height: 50px;
}

.sort_lists_floor .btn_sort_text{
    font-size: clamp(1.125rem, 0.404rem + 2.88vw, 2.25rem);
    letter-spacing: .1em;
}

@media (400px <= width) {
    .icon_cat_img svg{
        width: 28%;
    }
    
    .sort_lists_category a:nth-of-type(2) svg{
        width: 69%;
    }
    
    .sort_lists_category a:nth-of-type(3) svg{
        width: 35%;
    }
    
    .sort_lists_category a:nth-of-type(4) svg{
        width: 39%;
    }
    
    .sort_lists_category a:nth-of-type(5) svg{
        width: 68%;
    }
    
    .sort_lists_category a:nth-of-type(6) svg{
        width: 27%;
    }
}

@media (600px <= width) {
    .sort_lists{
        margin: 0 0 min(10.666vw, 109px);
    }

    .sort_lists_category{
        grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
        gap: 40px 5.333vw;
    }

    .icon_cat_img{
        padding: 10px 0 0;
    }

    .sort_lists_category .btn_sort_text{
        margin: 0 0 5px;
    }
    
}

@media (1024px < width) {
    .sort_lists{
        margin: 0 0 80px;
    }

    .sort_lists_category{
        gap: 40px 18px;
    }

    .sort_lists_floor{
        grid-template-columns: repeat(5, 90px);
        grid-template-rows: 90px;
        gap: 0 30px;
        justify-content: center;
        grid-auto-flow: column;
    }

    .icon_cat_img svg{
        width: 25%;
    }

    .sort_lists_category a:nth-of-type(2) svg{
        width: 66%;
    }

    .sort_lists_category a:nth-of-type(3) svg{
        width: 37%;
    }

    .sort_lists_category a:nth-of-type(4) svg{
        width: 37%;
    }

    .sort_lists_category a:nth-of-type(5) svg{
        width: 63%;
    }

    .sort_lists_category .btn_sort_text{
        font-size: .938rem;
    }

    .sort_lists_floor .btn_sort_text{
        font-size: clamp(1.5rem, 0.036rem + 2.29vw, 1.75rem);
    }
}

@media (1085px < width) {
    .sort_lists_category .btn_sort_text{
        height: 40px;
        margin: 0 0 15px;
    }
}