.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-5);
}

.container--narrow {
  max-width: var(--container-narrow);
}

main > section,
main > article > section {
  padding: var(--space-8) 0;
}

@media (min-width: 768px) {
  main > section,
  main > article > section {
    padding: var(--space-9) 0;
  }
}

.section-title {
  font-size: var(--fs-2xl);
  margin-bottom: var(--space-6);
}

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}

.section-head .section-title { margin-bottom: 0; }

.section-head__link {
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--color-primary-deep);
}

[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-3) var(--ease-soft), transform var(--dur-3) var(--ease-soft);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

.placeholder-hero,
.placeholder-wide,
.placeholder-product,
.placeholder-avatar,
.placeholder-glyph {
  background:
    linear-gradient(135deg, rgba(131, 179, 61, 0.35), rgba(61, 76, 244, 0.25) 60%, rgba(76, 115, 35, 0.4)),
    radial-gradient(circle at 20% 30%, rgba(237, 251, 252, 0.6), transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(204, 17, 0, 0.12), transparent 50%);
  background-color: var(--color-primary-deep);
  position: relative;
  overflow: hidden;
}

.placeholder-hero::after,
.placeholder-wide::after,
.placeholder-product::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.2 0 0 0 0 0.1 0 0 0 0.32 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
  opacity: 0.6;
  pointer-events: none;
}

.placeholder-product {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-md);
}

.placeholder-product--thumb { aspect-ratio: 1; }

.placeholder-wide {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
}

.placeholder-avatar {
  width: 84px; height: 84px;
  border-radius: 50%;
  display: inline-block;
}

.placeholder-glyph {
  width: 48px; height: 48px;
  border-radius: 50%;
  display: inline-block;
}