/* Homepage seasonal presentation stage.
   The artwork fills the hero width and is slightly scaled on desktop so the
   stage reads as one continuous image. Only the thin green closing line remains. */

.approved-hero {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: none;
  padding: 0;
  background: transparent;
  overflow: hidden;
  border-bottom: 2px solid var(--green);
}

.approved-hero img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  object-position: center center;
  border: 0;
  box-shadow: none;
}

@media (min-width: 821px) {
  .approved-hero {
    display: block;
    min-height: 0;
    background: transparent;
  }

  .approved-hero img {
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center center;
    transform: scale(1.035);
    transform-origin: center center;
    background: transparent;
  }

  .approved-hero::after {
    content: none;
  }

  .feature-strip {
    height: auto;
    min-height: 112px;
    overflow: visible;
    border-top: 0;
    border-bottom: 1px solid rgba(43,22,10,.24);
  }

  .feature-strip .features,
  .feature-strip .feature {
    height: auto;
  }

  .feature-strip .feature {
    min-height: 112px;
  }
}

@media (max-width: 820px) {
  .approved-hero::after {
    content: none;
  }

  .approved-hero {
    display: block;
    height: auto;
    min-height: 0;
    max-height: none;
    padding: 0;
    background: transparent;
    box-shadow: none;
  }

  .approved-hero img {
    width: 100%;
    height: auto;
    object-fit: contain;
    background: transparent;
    border: 0;
    box-shadow: none;
  }
}

@media (max-width: 520px) {
  .approved-hero img {
    object-position: center center;
  }
}