/**
 * @file
 * Bento grid block - estilos base según mockup.
 */

.costa-bento__grid {
  display: grid !important;
  grid-template-columns: 1fr;
  grid-auto-rows: 200px;
  gap: 1rem;
  min-height: 200px;
}

@media (min-width: 768px) {
  .costa-bento__grid {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 250px;
    gap: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .costa-bento__grid {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 280px;
  }
}

.costa-bento__card {
  min-height: 200px;
  display: block;
  position: relative;
  overflow: hidden;
  background-color: rgb(var(--brand-primary));
  border-radius: var(--radius-lg, 0);
  will-change: transform;
}

.costa-bento__card img {
  will-change: transform, opacity;
}