:root { --warm: #ddd3c0; }

.butter-object { background: #eee9dd; }
.butter-object img { object-fit: contain; padding: clamp(35px, 6vw, 92px); mix-blend-mode: multiply; }
.butter-pair { grid-template-columns: 1fr 1fr; }
.butter-pair figure { min-height: 760px; }
.butter-pair figure:first-child img { object-position: center 55%; }
.butter-process { display: grid; grid-template-columns: 1fr 1fr; background: #d9b329; border-top: 1px solid var(--line); }
.butter-process figure { margin: 0; min-height: 600px; border-right: 1px solid rgba(23, 23, 21, .35); }
.butter-process figure:last-child { border-right: 0; }
.butter-process img { width: 100%; height: 100%; object-fit: cover; display: block; }
.butter-process figcaption, .butter-gallery figcaption { padding: 12px 18px; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }

.butter-gallery { border-top: 1px solid var(--line); background: #e7e2d9; }
.butter-gallery-heading { padding: 6vw 3.4vw 4vw; }
.butter-gallery-heading h2 { font-family: var(--serif); font-size: clamp(48px, 5.5vw, 86px); font-weight: 400; line-height: .94; letter-spacing: -.05em; margin: 22px 0 0; }
.butter-gallery figure { margin: 0; }
.butter-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; }
.butter-gallery-wide { border-top: 1px solid var(--line); }
.butter-gallery-wide img { aspect-ratio: 16 / 8.4; }
.butter-gallery-wide figcaption, .butter-gallery-pair figcaption { border-top: 1px solid var(--line); }
.butter-gallery-pair { display: grid; grid-template-columns: 58% 42%; border-top: 1px solid var(--line); }
.butter-gallery-pair figure { min-height: 720px; border-right: 1px solid var(--line); }
.butter-gallery-pair figure:last-child { border-right: 0; }
.butter-gallery-pair figure:last-child img { object-position: center 52%; }

.butter-dimensions { display: grid; grid-template-columns: 42% 58%; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.butter-dimensions-copy { padding: 7vw 3.4vw; border-right: 1px solid var(--line); }
.butter-dimensions h2 { font-family: var(--serif); font-size: clamp(48px, 5.5vw, 86px); font-weight: 400; line-height: .94; letter-spacing: -.05em; margin: 22px 0 30px; }
.butter-dimensions-copy > p { font-size: 16px; line-height: 1.65; max-width: 500px; }
.butter-dimensions-data { display: grid; grid-template-columns: 1fr 1fr; }
.butter-dimensions-data > div { padding: 34px 4vw; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.butter-dimensions-data > div:nth-child(2n) { border-right: 0; }
.butter-dimensions-data > div:nth-last-child(-n+2) { border-bottom: 0; }
.butter-dimensions-data b, .butter-dimensions-data span { display: block; }
.butter-dimensions-data b { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 12px; }
.butter-dimensions-data span { font-family: var(--serif); font-size: 21px; line-height: 1.35; }

@media (max-width: 900px) {
  .butter-pair { grid-template-columns: 1fr 1fr; }
  .butter-pair figure { min-height: 60vw; }
  .butter-process, .butter-dimensions { grid-template-columns: 1fr; }
  .butter-process figure { min-height: 60vw; border-right: 0; border-bottom: 1px solid rgba(23, 23, 21, .35); }
  .butter-gallery-heading { padding: 58px 24px; }
  .butter-gallery-pair { grid-template-columns: 1fr 1fr; }
  .butter-gallery-pair figure { min-height: 60vw; }
  .butter-dimensions-copy { padding: 58px 24px; border-right: 0; border-bottom: 1px solid var(--line); }
}

@media (max-width: 560px) {
  .butter-pair, .butter-gallery-pair, .butter-dimensions-data { grid-template-columns: 1fr; }
  .butter-pair figure, .butter-gallery-pair figure { min-height: 0; }
  .butter-pair img { aspect-ratio: 4 / 5; }
  .butter-gallery-wide img { aspect-ratio: 4 / 3; }
  .butter-gallery-pair figure { border-right: 0; border-bottom: 1px solid var(--line); }
  .butter-gallery-pair figure:last-child { border-bottom: 0; }
  .butter-gallery-pair img { aspect-ratio: 4 / 5; }
  .butter-dimensions-data > div { border-right: 0; }
  .butter-dimensions-data > div:nth-last-child(2) { border-bottom: 1px solid var(--line); }
}