:root {
  --page-width: 46.875rem;
  --page-padding: clamp(0.5rem, 2vw, 1.5rem);
  --frame-gap: clamp(0.4rem, 1.6vw, 0.9rem);
  --brand-gap: clamp(1.5rem, 4vw, 2.5rem);
  --bg: #f6f1e8;
  --ideas-track-width: 1467px;
  --ideas-track-height: 459px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--bg);
  color: #4c3c31;
  font-family: Arial, sans-serif;
  position: relative;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.16)),
    url("../assets/frames/background-texture.jpg") center top / cover no-repeat;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at top center, rgba(255, 255, 255, 0.55), transparent 35%),
    radial-gradient(circle at bottom center, rgba(255, 255, 255, 0.24), transparent 40%);
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

.page {
  width: min(calc(100vw - (var(--page-padding) * 2)), var(--page-width));
  margin: 0 auto;
  padding: clamp(1rem, 2.4vw, 1.5rem) 0 clamp(2rem, 6vw, 3rem);
}

.brand {
  width: min(100%, 25rem);
  margin: clamp(1.6rem, 5vw, 3.2rem) auto var(--brand-gap);
}

.frame-stack {
  display: flex;
  flex-direction: column;
  gap: var(--frame-gap);
}

.frame {
  margin: 0;
  width: 100%;
}

.frame img {
  width: 100%;
}

.frame--ribbon {
  width: min(100%, 40.5rem);
  margin-inline: auto;
}

.ideas-slider {
  width: 100%;
  margin: clamp(0.15rem, 1vw, 0.45rem) 0;
}

.ideas-slider__viewport {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  position: relative;
  padding-bottom: 0.4rem;
  cursor: grab;
  scrollbar-width: thin;
  scrollbar-color: rgba(110, 84, 63, 0.42) transparent;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

.ideas-slider__viewport.is-dragging {
  cursor: grabbing;
  user-select: none;
}

.ideas-slider__viewport::-webkit-scrollbar {
  height: 0.45rem;
}

.ideas-slider__viewport::-webkit-scrollbar-thumb {
  background: rgba(110, 84, 63, 0.36);
  border-radius: 999px;
}

.ideas-slider__track {
  position: relative;
  width: var(--ideas-track-width);
  height: var(--ideas-track-height);
}

.ideas-slider__tape {
  position: absolute;
  inset: 0;
  width: var(--ideas-track-width);
  height: var(--ideas-track-height);
  max-width: none;
}

.ideas-slider__card {
  position: absolute;
  width: 21.5rem;
  max-width: none;
}

.ideas-slider__card--one {
  left: 3rem;
  top: 7.15rem;
  transform: rotate(-6deg);
}

.ideas-slider__card--two {
  left: 34.85rem;
  top: 7.4rem;
  transform: rotate(3deg);
}

.ideas-slider__card--three {
  left: 67.15rem;
  top: 1.35rem;
  transform: rotate(-2deg);
}

.examples {
  display: flex;
  flex-direction: column;
  gap: var(--frame-gap);
}

.examples .frame {
  margin: 0;
  width: 100%;
}

@media (max-width: 50rem) {
  body::before {
    background-size: 1400px auto;
  }

  .page {
    width: min(calc(100vw - 1rem), var(--page-width));
  }

  .frame--ribbon {
    width: min(100%, 92%);
  }

  .brand {
    width: min(100%, 22rem);
  }

  .ideas-slider__track {
    width: 1467px;
    height: 459px;
  }
}

@media (max-width: 30rem) {
  :root {
    --frame-gap: 0.25rem;
  }

  body::before {
    background-size: 1200px auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}