body#top .date-ideas-promo {
  display: grid;
  grid-template-columns: minmax(280px, .78fr) minmax(0, 1.22fr);
  width: min(1180px, calc(100% - 40px));
  margin: clamp(42px, 7vw, 86px) auto;
  overflow: hidden;
  border-radius: 32px;
  background: #163e33;
  color: #fff;
  box-shadow: 0 24px 66px rgba(29, 51, 42, .16);
}

body#top .date-ideas-promo-media { position: relative; min-height: 420px; overflow: hidden; }
body#top .date-ideas-promo-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
body#top .date-ideas-promo-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 60%, rgba(22, 62, 51, .28)); pointer-events: none; }
body#top .date-ideas-promo-media > span { position: absolute; z-index: 2; left: 12px; bottom: 12px; padding: 6px 8px; border-radius: 999px; background: rgba(12, 33, 27, .82); color: rgba(255,255,255,.82); font-size: 9px; font-weight: 800; }

body#top .date-ideas-promo-copy { align-self: center; padding: clamp(34px, 6vw, 74px); }
body#top .date-ideas-promo-copy > p:first-child { margin: 0 0 13px; color: #f3c75b; font-size: 11px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
body#top .date-ideas-promo-copy h2 { margin: 0; color: #fff; font-family: Fraunces, Georgia, serif; font-size: clamp(36px, 4.6vw, 60px); letter-spacing: -.045em; line-height: 1; text-wrap: balance; }
body#top .date-ideas-promo-copy > p:not(:first-child) { max-width: 650px; margin: 21px 0 0; color: rgba(255,255,255,.76); font-size: 16px; line-height: 1.65; }
body#top .date-ideas-promo-modes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
body#top .date-ideas-promo-modes span { padding: 7px 10px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; color: rgba(255,255,255,.82); font-size: 11px; font-weight: 800; }
body#top .date-ideas-promo-copy > a { display: inline-flex; align-items: center; gap: 9px; margin-top: 27px; padding: 13px 17px; border-radius: 999px; background: #f3c75b; color: #2c240e; font-size: 13px; font-weight: 900; text-decoration: none; }
body#top .date-ideas-promo-copy > a:hover { background: #ffdb79; color: #2c240e; transform: translateY(-2px); }

html[data-theme="dark"] body#top .date-ideas-promo { background: #183e34; }

@media (max-width: 820px) {
  body#top .date-ideas-promo { grid-template-columns: 1fr; }
  body#top .date-ideas-promo-media { min-height: 330px; }
  body#top .date-ideas-promo-media::after { background: linear-gradient(180deg, transparent 70%, rgba(22, 62, 51, .36)); }
}

@media (max-width: 560px) {
  body#top .date-ideas-promo { width: min(100% - 24px, 1180px); border-radius: 24px; }
  body#top .date-ideas-promo-media { min-height: 260px; }
  body#top .date-ideas-promo-copy { padding: 30px 22px 34px; }
}

@media (prefers-reduced-motion: reduce) {
  body#top .date-ideas-promo-copy > a:hover { transform: none; }
}