.garden-hero {
  min-height: 210px;
  box-sizing: border-box;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid var(--gg-border);
  border-radius: var(--radius);
  background:
    linear-gradient(90deg, rgba(250, 249, 246, .98) 0%, rgba(250, 249, 246, .9) 38%, rgba(250, 249, 246, .18) 72%),
    url('/images/muted-garden-hero.webp') center right / cover no-repeat;
  box-shadow: 0 10px 30px rgba(37, 42, 40, .08);
}

.auth-shell {
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2rem);
}

.auth-card {
  justify-self: stretch;
  width: 100%;
  box-sizing: border-box;
}

.auth-content {
  width: min(100%, 520px);
  margin-inline: auto;
}

.auth-art {
  width: 100%;
  box-sizing: border-box;
  align-self: stretch;
  min-height: clamp(210px, 28vw, 340px);
  order: -1;
  border: 1px solid var(--gg-border);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(41, 70, 58, .02), rgba(41, 70, 58, .18)),
    url('/images/muted-garden-hero.webp') center 58% / cover no-repeat;
  box-shadow: 0 15px 45px rgba(37, 42, 40, .1);
}

@media (max-width: 850px) {
  .auth-art { min-height: 190px; background-position: 65% 62%; }
}

@media (max-width: 600px) {
  .garden-hero { min-height: 190px; background-position: 62% center; }
  .auth-art { min-height: 145px; }
}