.designs {
  background: #eeeee3;
}

.design-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.design-card {
  min-width: 0;
  padding: 14px 14px 26px;
  border: 1px solid #d9ddcf;
  border-radius: 20px;
  background: var(--paper);
}

.design-preview {
  --cover: #0b4736;
  --page: #faf7e8;
  --ornament: #c9a753;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 270px;
  padding: 24px 12px;
  overflow: hidden;
  border-radius: 13px;
  background: #e6e4d8;
}

.sapphire .design-preview { --cover: #091a38; --page: #f2f7f7; background: #e0e6e8; }
.rose .design-preview { --cover: #38101f; --page: #fcf2ed; background: #ede0df; }

.preview-cover, .preview-page {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  flex: 0 1 126px;
  height: 208px;
  box-shadow: 2px 9px 15px #14271b24;
}

.preview-cover {
  padding: 14px;
  border-radius: 5px 11px 11px 5px;
  background: var(--cover);
  color: #e4bf65;
}

.preview-cover::before, .preview-page::before {
  position: absolute;
  inset: 8px;
  border: 1px solid var(--ornament);
  border-radius: 2px 7px 7px 2px;
  content: "";
  opacity: .72;
}

.preview-cover::after {
  position: absolute;
  inset: 12px;
  border: 1px solid var(--ornament);
  border-radius: 2px 5px 5px 2px;
  content: "";
  opacity: .48;
}

.cover-mark {
  z-index: 1;
  font-family: Georgia, serif;
  font-size: 17px;
  line-height: 1.35;
  letter-spacing: .18em;
  text-align: center;
}

.cover-ornament { z-index: 1; font-size: 33px; line-height: 1; }
.preview-page { padding: 18px; border-radius: 2px 7px 7px 2px; background: var(--page); color: #735a2e; }
.page-heading { z-index: 1; font: italic 15px Georgia, serif; text-align: center; }
.page-corner { z-index: 1; align-self: flex-start; font-size: 23px; line-height: 1; }
.page-corner-end { align-self: flex-end; transform: rotate(180deg); }
.page-lines { z-index: 1; width: 74%; height: 46px; background: repeating-linear-gradient(to bottom, transparent 0 10px, currentColor 11px 12px); opacity: .28; }
.sapphire .preview-page { color: #29455e; }
.rose .preview-page { color: #744454; }

.design-card h3 { margin: 23px 16px 10px; }
.design-card p { margin: 0 16px; color: var(--muted); font-size: 15px; }
.design-more { margin: 32px 0 0; text-align: center; font: italic clamp(21px, 2.5vw, 30px) Georgia, serif; color: #173f31; }
.designs > .caption { text-align: center; margin-top: 28px; }

.future {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 8%;
  align-items: start;
}

.future-copy { max-width: 470px; }
.future-details { display: grid; gap: 28px; }
.future-details > div { border-left: 2px solid var(--gold); padding-left: 22px; }
.future-details h3 { margin: 0 0 12px; }
.future-details p { max-width: 540px; margin: 0; color: var(--muted); font-size: 16px; }

@media (max-width: 800px) {
  .design-grid { grid-template-columns: 1fr; }
  .future { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 700px) {
  .design-card { padding: 12px 12px 24px; }
  .future-details > div { padding-left: 18px; }
}