.features {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 280px));
  justify-content: center;
  gap: clamp(20px, 3vw, 40px);
  padding: 60px 20px;
}

.feature-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.feature {
  text-align: center;
  width: 100%;
  height: 100%;
  background-color: var(--panel);
  padding: 20px;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  transition: transform 0.3s, box-shadow 0.3s;
}

.feature-image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-card);
}

.feature img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feature:hover,
.feature-link .feature:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-card-hover);
}