/* The Original Hog Wild additions on top of the shared Hog Wild styles */
.brand-original img { width: 72px; height: auto; }
.site-footer .brand-original img { width: 110px; }
@media (min-width: 700px) { .quick-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .food-grid-3 { grid-template-columns: repeat(3, 1fr); } }

/* Hero: original large text; the photo gets a smaller panel so it is never stretched */
@media (min-width: 900px) {
  .hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: stretch; min-height: 0; }
  .hero::after { display: none; }
  .hero-media { position: relative; inset: auto; z-index: 0; grid-column: 2; grid-row: 1; align-self: center; height: auto; aspect-ratio: 4 / 3;
    margin: 3rem max(16px, calc((100vw - 1180px) / 2)) 5rem 0; border-radius: 18px; overflow: hidden; box-shadow: 0 18px 40px rgba(0, 0, 0, .35); }
  .hero-media img { object-position: center; }
  .hero-inner { grid-column: 1; grid-row: 1; width: auto; margin: 0; padding: 5rem 2.5rem 7.5rem max(16px, calc((100vw - 1180px) / 2)); align-self: center; }
}
/* Phones and tablets: the whole photo as a banner, text below on dark */
@media (max-width: 899px) {
  .hero { display: block; min-height: 0; }
  .hero::after { display: none; }
  .hero-media { position: relative; inset: auto; z-index: 0; height: auto; aspect-ratio: 16 / 8; }
  .hero-media img { object-position: center 62%; }
  .hero-inner { padding: 1.8rem 0 5.8rem; }
}

/* Older Safari (iOS 14 and earlier) has no aspect-ratio: give the photo box a height another way */
@supports not (aspect-ratio: 1 / 1) {
  .hero-media { height: 0 !important; padding-bottom: 50%; }
  @media (min-width: 900px) { .hero-media { padding-bottom: 36%; } }
}