/* Production page bento/tetris mosaic — bypasses Tailwind JIT */
.am-tetris {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(4, 1fr);
  aspect-ratio: 3 / 2;
  gap: 10px;
  padding: 10px;
  border-radius: 1.5rem;
  overflow: hidden;
  background:
    radial-gradient(circle at 0% 0%, rgba(10, 78, 167, 0.18), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(125, 211, 252, 0.18), transparent 55%),
    #f4f7fb;
  box-shadow: 0 28px 70px -30px rgba(10, 44, 82, 0.35);
}

.am-tetris__item {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: #0a2e52;
  isolation: isolate;
}

.am-tetris__item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(10, 44, 82, 0.25));
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 2;
}

.am-tetris__item:hover::after {
  opacity: 1;
}

.am-tetris__item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.am-tetris__item:hover img {
  transform: scale(1.06);
}

/* Asymmetric bento — 6 cols × 4 rows = 24 cells, all used */
.am-tetris__item--0 { grid-column: 1 / span 3; grid-row: 1 / span 3; } /* big hero, 9 cells */
.am-tetris__item--1 { grid-column: 4 / span 3; grid-row: 1 / span 2; } /* wide top-right, 6 cells */
.am-tetris__item--2 { grid-column: 4 / span 2; grid-row: 3 / span 1; } /* mid, 2 cells */
.am-tetris__item--3 { grid-column: 6 / span 1; grid-row: 3 / span 1; } /* small square, 1 cell */
.am-tetris__item--4 { grid-column: 1 / span 2; grid-row: 4 / span 1; } /* bottom-left, 2 cells */
.am-tetris__item--5 { grid-column: 3 / span 4; grid-row: 4 / span 1; } /* wide bottom, 4 cells */

/* Tablet — slightly narrower aspect */
@media (max-width: 1024px) {
  .am-tetris {
    aspect-ratio: 4 / 3;
    gap: 8px;
    padding: 8px;
  }
}

/* Mobile — vertical stack with varied sizes */
@media (max-width: 640px) {
  .am-tetris {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(5, 1fr);
    aspect-ratio: 4 / 5;
    gap: 6px;
    padding: 6px;
    border-radius: 1.25rem;
  }
  .am-tetris__item { border-radius: 12px; }
  .am-tetris__item--0 { grid-column: 1 / span 4; grid-row: 1 / span 2; } /* hero */
  .am-tetris__item--1 { grid-column: 1 / span 2; grid-row: 3 / span 2; }
  .am-tetris__item--2 { grid-column: 3 / span 2; grid-row: 3 / span 1; }
  .am-tetris__item--3 { grid-column: 3 / span 2; grid-row: 4 / span 1; }
  .am-tetris__item--4 { grid-column: 1 / span 2; grid-row: 5 / span 1; }
  .am-tetris__item--5 { grid-column: 3 / span 2; grid-row: 5 / span 1; }
}