/* ---------- Showcase page ---------- */

.showcase-page {
  background: #fff;
}

.showcase-page main .showcase-container {
  width: min(1152px, calc(100% - 80px));
  margin: 0 auto;
}

@media (max-width: 640px) {
  .showcase-page main .showcase-container {
    width: calc(100% - 32px);
  }
}

.showcase-section {
  padding-top: clamp(40px, 5vw, 64px);
  padding-bottom: clamp(48px, 6vw, 80px);
}

.showcase-section + .showcase-section {
  padding-top: 0;
}

.showcase-header {
  margin: 0 0 clamp(32px, 4vw, 55px);
}

.showcase-header h2 {
  margin: 0;
}

.showcase-header p {
  /* margin: clamp(8px, 1.2vw, 12px) 0 0;
  font-size: clamp(1rem, 2vw, 28.21px);
  font-weight: 400;
  line-height: 1.607; */
  color: rgba(0, 0, 0, 0.6);
}

.showcase-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(10px, 1.5vw, 15px);
}

@media (min-width: 560px) {
  .showcase-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .showcase-grid {
    grid-template-columns: repeat(3, minmax(0, 374px));
    justify-content: center;
  }
}

.showcase-grid img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* 3-456.png is a 1161×375 composite (3 tiles); slice into equal squares */
.showcase-sprite {
  overflow: hidden;
  aspect-ratio: 1 / 1;
}

.showcase-sprite img {
  display: block;
  width: 300%;
  max-width: none;
  height: 100%;
  object-fit: cover;
}

.showcase-sprite--1 img {
  object-position: left center;
  transform: translateX(0%);
}

.showcase-sprite--2 img {
  object-position: center center;
  transform: translateX(-33%);
}

.showcase-sprite--3 img {
  object-position: right center;
  transform: translateX(-66%);
}