.dine {
  max-width: 1040px;
  margin: 16px auto 32px;
  padding: 16px 12px 8px;
  border: 1px solid #e0e0e0;
  background: #fff;
  color: #333;
}
.dine h1 { margin: 8px 0; font-size: 28px; font-weight: 800; text-align: center; }
.lead { margin: 0 0 12px; text-align: center; font-size: 18px; }
.hero-offer, .banner { display: block; width: 100%; height: auto; margin: 0 auto 8px; }
.benefit { margin: 18px 0 28px; }
.details { display: flex; gap: 16px; align-items: center; padding: 8px 4px 0; }
.logo { width: 96px; height: auto; flex: none; }
.dine a { color: inherit; text-decoration: none; }
.name { font-weight: 800; font-size: 22px; }
.perk { font-weight: 800; }
.more { margin: 8px 0 0; }
.more a { color: #f21170; }
@media (max-width: 767px) {
  .dine h1 { font-size: 22px; }
  .lead { font-size: 16px; }
  .details { align-items: flex-start; }
  .name { font-size: 18px; }
}