.hello { background: var(--yellow); border-bottom: 3px solid var(--ink); }
.duo { display: grid; grid-template-columns: 1.18fr 1fr; align-items: center; gap: 42px; padding-block: 60px 68px; }
.pro h1 { max-width: 11ch; margin-bottom: 26px; }
.pro h1 em { display: block; font: italic 400 .72em/1.15 Georgia, serif; letter-spacing: -.04em; margin-top: 12px; }
.pro .go { margin-top: 27px; }
.art { min-width: 0; }
.mat { padding: 16px; background: #f8f4ff; border-radius: 40px 90px 36px 36px; transform: rotate(3deg); box-shadow: 9px 12px 0 #ded2ed; }
.mat img { display: block; width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; border-radius: 28px 74px 22px 22px; background: var(--lilac); color: var(--mut); font-size: 16px; line-height: 1.5; }
.art figcaption { font: italic 400 17px/1.45 Georgia, serif; padding: 27px 8px 0; text-align: center; }
.folds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; padding-bottom: 84px; }
.wide { grid-column: 1 / -1; padding-bottom: 18px; }
.wide h2 { margin-bottom: 18px; }
.fold { padding: 28px; border-radius: 28px 28px 42px 28px; border-bottom: 5px solid #beb188; display: flex; align-items: start; flex-direction: column; }
.fold h3 { margin-block: 22px 18px; max-width: 14ch; font-size: 28px; }
.fold p { font-size: 18px; }
.fold .fn { margin-top: auto; padding-top: 22px; }
.lem { background: #fff5b5; }
.lil { background: var(--lilac); border-color: #b9a1d2; }
.sky { background: var(--sky); border-color: #a2bdd8; }
.dot, .swatch, .tear { display: block; width: 47px; height: 47px; background: #3759be; }
.dot { border-radius: 50%; }
.swatch { border-radius: 12px; transform: rotate(-8deg); background: #7652ad; }
.tear { border-radius: 50% 50% 12px 12px; background: #436c95; transform: rotate(12deg); }
.band { background: #f0ecfb; }
.check { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 72px; padding-block: 64px 70px; }
.check h1 { margin-bottom: 25px; }
.small .mat { transform: rotate(-3deg); background: var(--yellow); border-radius: 80px 32px 32px 32px; box-shadow: -9px 12px 0 #ded2ed; }
.small img { aspect-ratio: 8 / 5; border-radius: 62px 18px 18px 18px; background: #e5ddf5; }
@media (max-width: 960px) {
  .duo { gap: 30px; }
  .folds { grid-template-columns: 1fr; max-width: 760px; }
  .fold { padding: 30px; }
  .fold h3 { max-width: none; }
  .fold .fn { margin-top: 10px; }
}
@media (max-width: 760px) {
  .duo { grid-template-columns: 1fr; gap: 42px; padding-block: 40px 42px; }
  .pro h1 { font-size: 53px; max-width: 12ch; }
  .pro .tag { max-width: 27ch; }
  .pro h1 em { font-size: 39px; }
  .art { width: calc(100% - 20px); margin-inline: auto; }
  .mat { padding: 12px; border-radius: 30px 65px 26px 26px; box-shadow: 5px 7px 0 #ded2ed; }
  .mat img { border-radius: 22px 54px 18px 18px; }
  .art figcaption { padding-top: 21px; }
  .folds { gap: 16px; padding-bottom: 50px; }
  .fold { padding: 27px; }
  .check { grid-template-columns: 1fr; gap: 40px; padding-block: 42px 50px; }
  .check h1 { font-size: 53px; }
}
@media (max-width: 360px) { .pro h1, .check h1 { font-size: 46px; } .pro h1 em { font-size: 34px; } }