.skills-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(195px, 1fr));
  gap: 25px;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
  justify-items: center; /* Center cards horizontally in their grid cells */
}

/* --- Responsive Breakpoints --- */

@media (max-width: 450px) {
  .skills-list { 
    /* Automatically falls back to 1 column and centers everything */
    grid-template-columns: 1fr;
    justify-content: center;
  }
}
  
@media (min-width: 580px) {
  .skills-list { 
    border-radius: 16px; 
    /* Give the container a subtle backdrop depth if inside a lighter theme */
    background: rgba(255, 255, 255, 0.02); 
  }
}
  
@media (min-width: 768px) {
  .skills-list {
    /* Step up to 2 columns minimum dynamically, or let auto-fit handle it */
    grid-template-columns: repeat(auto-fit, minmax(195px, 1fr));
    gap: 30px;
  }
}
  
@media (min-width: 1024px) {
  .skills-list { 
    /* Force a clean 3 or 4 column structure on desktop */
    grid-template-columns: repeat(3, 1fr); 
    max-width: 800px; /* Limits width so 3 cards look perfectly proportioned */
  }
}

.card {
  width: 195px;
  height: 285px;
  background: #313131;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  transition: 0.2s ease-in-out;
}

.img {
  height: 30%;
  position: absolute;
  transition: 0.2s ease-in-out;
  z-index: 1;
}

.textBox {
  opacity: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15px;
  transition: 0.2s ease-in-out;
  z-index: 2;
}

.textBox > .text {
  font-weight: bold;
}

.textBox > .head {
  font-size: 20px;
}

.textBox > .price {
  font-size: 17px;
}

.textBox > span {
  font-size: 12px;
  color: lightgrey;
}

.card:hover > .textBox {
  opacity: 1;
}

.card:hover > .img {
  height: 65%;
  filter: blur(7px);
  animation: anim 3s infinite;
}

@keyframes anim {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-20px);
  }

  100% {
    transform: translateY(0);
  }
}

.card:hover {
  transform: scale(1.04) rotate(-1deg);
}