.brandways-scene {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(12px, 2vw, 36px);
  padding: clamp(64px, 11svh, 112px) var(--page-gutter) clamp(58px, 9svh, 96px);
}

.brandways-scene .brandways-center,
.brandways-scene .brandways-direction {
  position: relative;
  inset: auto;
  width: auto;
  transform: none;
  padding: 0;
  min-width: 0;
}

.brandways-center,
.brandways-family .brandways-direction {
  grid-area: 1 / 2;
}

.brandways-center h2 {
  font-size: clamp(36px, 4.7vw, 76px);
}

.brandways-piece {
  margin: 0;
  width: min(100%, 38svh, 540px);
  justify-self: center;
  text-align: center;
}

.brandways-piece-left {
  grid-area: 1 / 1;
}

.brandways-piece-right {
  grid-area: 1 / 3;
}

.brandways-scene .brandways-piece img,
.brandways-scene .brandways-artwork .brandways-hero {
  position: static;
  width: 100%;
  max-width: 100%;
  height: auto;
  transform: none;
}

.brandways-piece figcaption {
  position: relative;
  margin-top: -.6em;
  font-size: clamp(19px, 2.1vw, 30px);
  line-height: 1.05;
  transform: rotate(-5deg);
}

.brandways-piece-right figcaption {
  transform: rotate(4deg);
}

.brandways-forest {
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr);
}

.brandways-oxblood {
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr);
}

.brandways-forest .brandways-direction,
.brandways-oxblood .brandways-artwork {
  grid-area: 1 / 1;
}

.brandways-oxblood .brandways-direction,
.brandways-forest .brandways-artwork {
  grid-area: 1 / 2;
}

.brandways-artwork {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(92px, .32fr);
  align-items: center;
  gap: clamp(10px, 1.5vw, 24px);
  width: min(100%, 980px);
  justify-self: center;
}

.brandways-scene .brandways-artwork .brandways-hero {
  width: min(100%, 62svh);
  justify-self: center;
}

.brandways-artwork-notes {
  display: grid;
  gap: clamp(12px, 2svh, 22px);
  justify-items: center;
  text-align: center;
}

.brandways-artwork .brandways-name-tag,
.brandways-artwork .brandways-parcel,
.brandways-artwork .brandways-swatch,
.brandways-artwork .brandways-margin-note {
  position: relative;
  inset: auto;
}

.brandways-artwork .brandways-name-tag,
.brandways-artwork .brandways-parcel {
  width: 100%;
  min-height: 0;
  padding: clamp(10px, 1.5vw, 22px);
}

.brandways-artwork .brandways-name-tag::before {
  display: none;
}

.brandways-artwork .brandways-swatch {
  width: clamp(36px, 5vw, 76px);
  height: auto;
  aspect-ratio: 5 / 6;
}

.brandways-artwork .brandways-margin-note {
  font-size: clamp(18px, 1.8vw, 28px);
  transform: rotate(4deg);
}

@media (max-width: 760px) {
  .brandways-scene {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
    align-content: center;
    gap: 12px;
    min-height: 0;
    height: auto;
    padding: 72px 24px 48px;
  }

  .brandways-scene .brandways-center,
  .brandways-scene .brandways-direction {
    grid-area: 1 / 1 / 2 / -1;
  }

  .brandways-center h2 {
    font-size: clamp(36px, 9vw, 48px);
  }

  .brandways-piece {
    width: 100%;
  }

  .brandways-piece-left {
    grid-area: 2 / 1;
  }

  .brandways-piece-right {
    grid-area: 2 / 2;
  }

  .brandways-forest .brandways-artwork,
  .brandways-oxblood .brandways-artwork {
    grid-area: 2 / 1 / 3 / -1;
  }

  .brandways-artwork .brandways-name-tag > strong {
    font-size: clamp(21px, 5.5vw, 30px);
  }

  .brandways-artwork .brandways-parcel {
    transform: rotate(5deg);
  }
}