.note-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 5vw;
}

.note-grid p { max-width: 290px; }

.yesterday-note {
  position: relative;
  padding: 115px 8vw;
  overflow: hidden;
  background: #f8dedf;
}

.yesterday-note::before,
.yesterday-note::after {
  content: "🐾";
  position: absolute;
  color: rgba(190, 126, 133, .2);
  font-size: 42px;
  transform: rotate(-18deg);
}

.yesterday-note::before { left: 7%; top: 18%; }
.yesterday-note::after { right: 8%; bottom: 14%; transform: rotate(20deg); }

.note-paper {
  position: relative;
  z-index: 1;
  width: min(820px, 100%);
  margin: auto;
  padding: 62px 8vw 55px;
  background: #fffaf4;
  border: 1px solid #ead3d0;
  border-radius: 8px 38px 8px 38px;
  box-shadow: 0 25px 65px rgba(111, 75, 74, .12);
  transform: rotate(-.5deg);
}

.note-paper::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 50%;
  width: 110px;
  height: 27px;
  background: rgba(244, 211, 190, .78);
  transform: translateX(-50%) rotate(2deg);
}

.note-paper h2 {
  margin: 0 0 28px;
  font-family: "Hannotate SC", "Yuanti SC", "STYuanti", sans-serif;
  font-size: clamp(29px, 4vw, 48px);
  line-height: 1.4;
  color: #725758;
}

.note-paper > p:not(.section-label) {
  margin: 13px 0;
  color: #816d6a;
  font-family: "Songti SC", serif;
  font-size: 14px;
  line-height: 2.05;
}

.note-paper blockquote {
  margin: 30px 0 20px;
  padding: 20px 23px;
  color: #9a7175;
  background: #fdf0ef;
  border-left: 3px solid #d9a4a9;
  font-family: "STKaiti", "Kaiti SC", serif;
  font-size: 16px;
  line-height: 2;
}

.paw-sign {
  display: block;
  text-align: right;
  color: #b78287;
  font-family: "STKaiti", "Kaiti SC", serif;
  font-size: 13px;
}

.note-cat {
  position: absolute;
  z-index: 2;
  top: 70px;
  left: calc(50% - 390px);
  display: flex;
  align-items: center;
  gap: 4px;
  color: #b77c82;
  font-size: 17px;
  transform: rotate(-8deg);
}

.note-cat span { font-size: 28px; }

@media (max-width: 760px) {
  .note-grid { grid-template-columns: 1fr; }
  .yesterday-note { padding: 85px 7vw; }
  .note-paper { padding: 50px 25px 38px; }
  .note-cat { top: 45px; left: 9vw; }
}
