.notes-preview {
  padding: clamp(76px, 10vw, 150px) 34px;
  border-top: 1px solid rgba(21, 23, 25, .82);
  border-bottom: 1px solid rgba(21, 23, 25, .82);
  background:
    linear-gradient(rgba(21, 23, 25, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21, 23, 25, .045) 1px, transparent 1px),
    #f1f0eb;
  background-size: 72px 72px;
}

.notes-preview-head {
  margin-bottom: clamp(48px, 7vw, 96px);
}

.notes-preview h2 {
  margin: 0;
  max-width: 980px;
  color: #2354d8;
  font-size: clamp(3.5rem, 7vw, 7.4rem);
  font-weight: 400;
  letter-spacing: -.075em;
  line-height: .88;
}

.notes-preview-grid {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-top: 1px solid rgba(21, 23, 25, .8);
}

.notes-preview-grid::-webkit-scrollbar { display: none; }

.note-preview {
  flex: 0 0 50%;
  min-width: 0;
  padding: 22px clamp(26px, 4vw, 64px) 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 22px;
  border-right: 1px solid rgba(21, 23, 25, .22);
  scroll-snap-align: start;
  color: inherit;
  text-decoration: none;
}

.note-preview:first-child {
  padding-left: 0;
}

.note-preview:last-child {
  padding-right: 0;
  border-right: 0;
}

.note-preview img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  filter: saturate(.82) contrast(1.04);
}

.note-preview h3 {
  margin: 0;
  max-width: 720px;
  font-size: clamp(2rem, 4vw, 4.6rem);
  font-weight: 400;
  letter-spacing: -.065em;
  line-height: .94;
}

.note-preview p {
  margin: 0;
  max-width: 620px;
  color: rgba(21, 23, 25, .68);
  font-size: clamp(.95rem, 1.2vw, 1.1rem);
  line-height: 1.55;
}

.note-preview-cta {
  padding: 18px 0;
  display: flex;
  justify-content: space-between;
  border-top: 1px solid rgba(21, 23, 25, .34);
  font-family: "DM Mono", monospace;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .68rem;
  transition: color .2s ease, padding .2s ease;
}

.note-preview:hover .note-preview-cta,
.note-preview:focus-visible .note-preview-cta {
  padding-left: 10px;
  color: #2354d8;
}

@media (max-width: 760px) {
  .notes-preview { padding: 76px 20px; }
  .notes-preview-head { margin-bottom: 54px; }
  .notes-preview h2 { font-size: clamp(3rem, 15vw, 4.5rem); }
  .notes-preview-grid {
    gap: 18px;
    margin-right: -20px;
    padding-right: 20px;
  }
  .note-preview,
  .note-preview:first-child,
  .note-preview:last-child {
    flex-basis: min(82vw, 420px);
    padding: 20px 0 0;
    border-right: 0;
  }
  .note-preview h3 { font-size: clamp(2.2rem, 10vw, 3.5rem); }
}