main{margin-bottom: 140px;}
.category{padding: 0 var(--padding-x); height: 100%; margin-top: 20px;}

/* ***********************category****************************** */
.category-buttons {
  display: grid;
  grid-template-columns: repeat(9,1fr);
  gap: 14px;
  margin-bottom: 30px;
}

.category-buttons button {
  padding: 8px 14px;
  border: none;
  border-radius: 5px;
  background: #727272;
  color: #f3f3f3;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.category-buttons button:hover{
    background: #b0b0b0;
}

.category-buttons button.active {
  background: #C71607;
  color: #f3f3f3;
  box-shadow: 0 4px 10px rgba(107, 0, 0, 0.3);
}

/*MEDIA QUERIES*/
@media screen and (max-width: 1600px){
    .category{margin-top: 100px;}
    .category-buttons{
        font-size: 14px;
    }
}

@media screen and (max-width: 1300px){
    .category-buttons{
        font-size: 14px;
        display: grid;
        grid-template-columns: repeat(5,1fr);
    }
}

@media screen and (max-width: 960px){
    .category-buttons{
        font-size: 13px;
        display: grid;
        grid-template-columns: repeat(4,1fr);
    }
}

@media screen and (max-width: 768px){
    .category-buttons{
        font-size: 12px;
        display: grid;
        grid-template-columns: repeat(3,1fr);
    }
}