/* Showcase */
.showcase-section {
  padding-block: var(--space-8);
  background: var(--color-surface);
}

.showcase-gallery {
  margin-top: var(--space-5);
}

.gallery-item {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  flex: 0 0 clamp(240px, 42vw, 320px);
  box-shadow: var(--shadow-sm);
  background: var(--color-surface-alt);
}

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

.gallery-item--wide {
  flex-basis: clamp(280px, 55vw, 420px);
}

.gallery-item--tall {
  aspect-ratio: 3 / 4;
}

.showcase-controls {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  margin-top: var(--space-5);
}

.showcase-control {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  border: 1px solid rgb(15 23 42 / 0.12);
  background: var(--color-surface);
  color: var(--color-body);
  font-size: 1.25rem;
  display: grid;
  place-items: center;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.showcase-control:hover {
  border-color: var(--color-primary);
  background: rgb(108 60 251 / 0.08);
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
}