/* CATEGORY SECTION CSS */
.category {padding-block: 60px;}
.category .head {display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; background-color: var(--c-light-bg); padding: 10px 20px; border-radius: 8px; margin-bottom: 1.5rem;}
.category .head > :first-child {font-size: calc(var(--fs-md) + 2px); font-weight: 600; line-height: calc(1 + .3/max(1, 1.0));}
.category .wrapper {display: grid; grid-template-columns: repeat(9, 1fr);  gap: 20px;} 
.category .box {display: flex; flex-direction: column; align-items: center;}
.category .box > :first-child {border-radius: 8px; width: fit-content; height: fit-content; overflow: hidden;}
.category .box img { height: 134px; border-radius: 8px; transition: .6s ease;}
.category .box:hover img {transform: scale(1.06);}
.category .box > :last-child {font-size: var(--fs-base); letter-spacing: .2px; font-weight: 500; text-align: center; padding-block: 15px; transition: var(--transition);}
.category .box > :last-child:hover {color: var(--c-primary);}

@media only screen and (max-width: 1200px) {
    .category .wrapper {grid-template-columns: repeat(7, 1fr);}
}

@media only screen and (max-width: 991px) {
    .category .wrapper {grid-template-columns: repeat(5, 1fr); gap: 10px 20px;}
    .category .box {width: 100%;}
    .category .box > :first-child {width: 100%;}
    .category .box img {width: 100%;}
}

@media only screen and (max-width: 768px) {
    .category .wrapper {grid-template-columns: repeat(4, 1fr);}
    
}

@media only screen and (max-width: 575px) {
    .category .wrapper {grid-template-columns: repeat(3, 1fr);}
}

@media only screen and (max-width: 425px) {
    .category .wrapper {grid-template-columns: repeat(2, 1fr);}
}