.campaign {
  display: block;
  position: relative;
  overflow: hidden;
  background: #ece7e0;
}

.campaign picture,
.campaign img {
  display: block;
  width: 100%;
  height: auto;
}

.campaign img { transition: transform .6s ease, opacity .3s ease; }
.campaign:hover img { transform: scale(1.015); }
.campaign:focus-visible { outline: 2px solid currentColor; outline-offset: -4px; }

.campaign-hero .campaign { background: #d9d5cf; }

.campaign-stack {
  display: grid;
  gap: 16px;
  padding: 0 16px;
}

.campaign-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 16px;
}

.brand-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px 48px;
  margin: 0 16px 16px;
  padding: 28px 16px;
  border-top: 1px solid rgba(0, 0, 0, .12);
  border-bottom: 1px solid rgba(0, 0, 0, .12);
}

.brand-strip-label {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .6;
}

.brand-logo { display: block; line-height: 0; opacity: .85; transition: opacity .2s ease; }
.brand-logo:hover { opacity: 1; }
.brand-logo img { height: 34px; width: auto; }

.logo.logo-image { display: flex; align-items: center; justify-content: center; padding-left: 0; letter-spacing: 0; line-height: 0; }
.logo.logo-image img { display: block; height: 30px; width: auto; }
.logo-footer.logo-image { justify-content: flex-start; }
.logo-footer.logo-image img { height: 28px; filter: invert(1); }

.collection-logo {
  display: block;
  width: min(560px, 80%);
  height: auto;
  margin: 8px 0 20px;
}
.collection-logo[hidden] { display: none; }

@media (max-width: 767px) {
  .brand-strip { margin: 0 10px 10px; padding: 20px 10px; }
  .brand-logo img { height: 26px; }
  .logo.logo-image img { height: 24px; }
  .campaign-stack { gap: 10px; padding: 0 10px; }
  .campaign-duo { grid-template-columns: 1fr; gap: 10px; padding: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .campaign img { transition: none; }
  .campaign:hover img { transform: none; }
}