.postcard-story {
  --story-paper: #f1e4cf;
  --story-white: #fffdf8;
  color: var(--blue);
  background: var(--story-white);
}

.postcard-story__hero {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  min-height: 680px;
  background: var(--story-paper);
}

.postcard-story__hero-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px clamp(36px, 6vw, 104px);
  text-align: center;
}

.postcard-story__city {
  margin: 28px 0 12px;
  color: var(--green);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.postcard-story__hero h1 {
  max-width: 640px;
  margin: 0 0 24px;
  font: 700 clamp(42px, 4.2vw, 68px)/1.04 var(--font-display);
}

.postcard-story__lead {
  max-width: 650px;
  margin: 0 0 34px;
  color: var(--ink);
  font-size: 19px;
  line-height: 1.55;
}

.postcard-story__hero-visual {
  display: grid;
  min-height: 680px;
  place-items: center;
  padding: clamp(42px, 6vw, 90px);
  overflow: hidden;
  background: #ddd5e4;
}

.postcard-story__hero-visual img {
  width: min(100%, 820px);
  border-radius: 18px;
  box-shadow: 18px 20px 0 rgba(47, 36, 133, .14);
  transform: rotate(-2deg);
}

.postcard-story__body {
  position: relative;
  padding: 110px 0 125px;
  background: var(--story-white);
}

.postcard-story__body::before,
.postcard-story__closing::before {
  content: '';
  position: absolute;
  z-index: 1;
  inset: -22px 0 auto;
  height: 44px;
  background: var(--story-white);
  clip-path: polygon(0 42%, 4% 67%, 9% 37%, 14% 69%, 20% 33%, 26% 63%, 33% 31%, 40% 66%, 47% 38%, 55% 70%, 63% 34%, 71% 64%, 79% 30%, 87% 67%, 94% 38%, 100% 60%, 100% 100%, 0 100%);
}

.postcard-story__article {
  max-width: 900px;
  margin: 0 auto;
  color: var(--ink);
  font-size: 20px;
  line-height: 1.65;
}

.postcard-story__article h2 {
  margin: 78px auto 24px;
  color: var(--blue);
  text-align: center;
  font: 700 clamp(34px, 4vw, 54px)/1.1 var(--font-display);
}

.postcard-story__article h2:first-child { margin-top: 0; }
.postcard-story__article p { margin: 0 0 24px; }

.postcard-story__article blockquote {
  margin: 62px 0;
  padding: 40px clamp(24px, 5vw, 58px);
  border: 2px dashed var(--blue);
  border-radius: 20px;
  color: var(--blue);
  background: var(--story-paper);
  box-shadow: 11px 12px 0 #dcd5e1;
  text-align: center;
  font: 700 italic clamp(23px, 2.7vw, 32px)/1.35 var(--font-display);
}

.postcard-story__gallery {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: center;
  max-width: 1120px;
  margin: 90px auto 0;
  gap: 28px;
}

.postcard-story__gallery-item { margin: 0; }
.postcard-story__gallery-item:nth-child(1),
.postcard-story__gallery-item:nth-child(4) { grid-column: span 7; }
.postcard-story__gallery-item:nth-child(2),
.postcard-story__gallery-item:nth-child(3) { grid-column: span 5; }
.postcard-story__gallery-item:nth-child(5) { grid-column: 4 / span 6; }
.postcard-story__gallery-item:nth-child(even) { transform: rotate(2deg); }
.postcard-story__gallery-item:nth-child(odd) { transform: rotate(-2deg); }

.postcard-story__gallery img {
  display: block;
  width: 100%;
  max-height: 620px;
  border-radius: 18px;
  box-shadow: 12px 13px 0 #dcd5e1;
  object-fit: cover;
}

.postcard-story__closing {
  position: relative;
  padding: 105px 0;
  background: var(--story-paper);
  text-align: center;
}

.postcard-story__closing::before { background: var(--story-paper); }
.postcard-story__closing p { max-width: 850px; margin: 0 auto 34px; font: 700 clamp(31px, 4vw, 52px)/1.14 var(--font-display); }

@media (max-width: 1023px) {
  .postcard-story__hero { grid-template-columns: 1fr; }
  .postcard-story__hero-copy { order: 2; padding-block: 54px 72px; }
  .postcard-story__hero-visual { min-height: 520px; padding: 62px 9vw; }
  .postcard-story__body { padding-block: 90px 105px; }
}

@media (max-width: 767px) {
  .postcard-story__hero-visual { min-height: 320px; padding: 42px 24px; }
  .postcard-story__hero-visual img { border-radius: 12px; box-shadow: 10px 11px 0 rgba(47, 36, 133, .14); }
  .postcard-story__hero-copy { padding: 38px 20px 62px; }
  .postcard-story__hero h1 { font-size: 36px; }
  .postcard-story__lead { font-size: 17px; }
  .postcard-story__body { padding: 72px 0 84px; }
  .postcard-story__article { font-size: 17px; line-height: 1.6; }
  .postcard-story__article h2 { margin-top: 54px; font-size: 32px; }
  .postcard-story__article blockquote { margin: 42px 0; padding: 30px 20px; font-size: 22px; }
  .postcard-story__gallery { grid-template-columns: 1fr; margin-top: 60px; gap: 28px; }
  .postcard-story__gallery-item:nth-child(n) { grid-column: auto; transform: none; }
  .postcard-story__gallery img { max-height: none; border-radius: 13px; box-shadow: 8px 9px 0 #dcd5e1; }
  .postcard-story__closing { padding: 82px 0; }
  .postcard-story__closing p { font-size: 30px; }
}