/* c-sub
------------------------------------------------------------------- */
.c-sub {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 10px;
    border-radius: 3px;
    -webkit-transition: box-shadow .3s, border-color .3s;
    -webkit-transition: border-color .3s, -webkit-box-shadow .3s;
    -o-transition: box-shadow .3s, border-color .3s;
    transition: border-color .3s, -webkit-box-shadow .3s;
    transition: box-shadow .3s, border-color .3s;
    transition: box-shadow .3s, border-color .3s, -webkit-box-shadow .3s;
    border: 2px solid #dadada;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
	background: #fff;
}

@media (max-width: 767px) {
    .c-sub {
        padding: 6px;
    }
}

.c-sub__img {
    position: relative;
    aspect-ratio: 1/1;
    padding: 10px;
    background: #fff;
    display: flex;
    justify-content: center;
}


.c-sub__img img {
 object-fit: contain;   
}

.c-sub__title {
    font-weight: 500;
    line-height: 1.2;
    color: var(--text-color);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-top: 16px;
    text-align: center;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.category-panel__list {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(6,1fr);
    margin-bottom: 30px;
}

.category-panel__item {
    border-radius: 3px;
}

@media (max-width: 1024px) {
    .c-sub__title {
        font-size: 16px;
    }
    .category-panel__list {
    grid-template-columns: repeat(4,1fr);}
}

@media (max-width: 1000px) {
    .c-sub__title {
        font-size: 14px;
    }
    .category-panel__list {
    grid-template-columns: repeat(3,1fr);}
}

@media (max-width: 768px) {
    .c-sub__title {
        font-size: 14px;
        margin-top: 6px;
    }
    .category-panel__list {
    grid-template-columns: repeat(2,1fr);}
}

@media (hover: hover) {
.c-sub:hover {
    border-color: var(--accent-color)!important;
}

.c-sub:hover .c-sub__title {
    color: var(--accent-color)!important;
}
}