@media(max-width:900px) {
  .hero {
    padding-top: 38px
  }

  .hero-grid {
    gap: 30px
  }

  .hero-copy h1 {
    font-size: clamp(44px, 6vw, 62px)
  }

  .art-note {
    font-size: 18px;
    padding: 15px
  }

  .hero-bottom {
    gap: 18px;
    font-size: 9px;
    letter-spacing: 1px
  }
}

@media(max-width:680px) {
  .hero-grid {
    grid-template-columns: 1fr
  }

  .hero-art {
    max-width: 440px;
    width: 100%;
    margin: 0 auto
  }

  .hero-copy h1 {
    font-size: clamp(46px, 10vw, 68px)
  }

  .art-note {
    left: 0;
    bottom: 42px;
    font-size: 24px
  }

  .hero-bottom {
    flex-wrap: wrap;
    gap: 8px 15px;
    padding: 16px 20px
  }

  .hero-bottom span {
    font-size: 9px
  }

  .hero-description {
    max-width: none
  }

  .hero-actions {
    gap: 18px
  }
}