.brand {
  background: #fff;
  border-radius: 12px;
  display: inline-flex;
  padding: .35rem .65rem;
}

.brand img { width: min(300px, 33vw); }

@media (max-width: 680px) {
  .brand { padding: .2rem .45rem; }
  .brand img { width: 205px; }
}

.hero { background-image: url('images/hero-12-days.webp'); }
.gallery { grid-template-columns: repeat(4, 1fr); }
.gallery img { height: 310px; }

@media (max-width: 900px) {
  .gallery { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .gallery { grid-template-columns: 1fr; }
  .gallery img { height: 280px; }
}