.hero {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 3 / 2;
  min-height: 0;
  background-color: #f4e6cf;
  background-image: url('assets/ardente-secondhand-shenanigans.png');
  background-size: 100% auto;
  background-position: center top;
  background-repeat: no-repeat;
  border-bottom: 8px solid #2d675f;
}

/* The uploaded artwork already contains the hero design, so hide the temporary CSS artwork. */
.sun-rays,
.hero::after,
.brand-panel,
.wood-sign,
.truck-scene {
  display: none;
}

.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 34px clamp(18px, 5vw, 70px);
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
}

.hero-side {
  width: min(100%, 500px);
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.search-note {
  display: none;
}

@media (max-width: 950px) {
  .hero {
    aspect-ratio: 3 / 2;
    background-size: 100% auto;
    background-position: center top;
  }

  .hero-inner {
    min-height: 0;
  }

  .hero-side {
    width: min(100%, 500px);
  }
}

@media (max-width: 620px) {
  .hero {
    aspect-ratio: 3 / 2;
    background-size: 100% auto;
    background-position: center top;
  }

  .hero-inner {
    min-height: 0;
    padding: 20px 16px;
  }
}