.notes {
  position: relative;
  width: 360px;
  height: auto;
  aspect-ratio: 615 / 335;
  flex-shrink: 0;
  overflow: hidden;
  transform: none;
}

.notes img {
  display: block;
  width: 245.7%;
  max-width: none;
  height: auto;
  transform: translate(-53.94%, -8.13%);
}

@media (max-width: 1050px) {
  .notes {
    width: 285px;
    transform: none;
  }
}

@media (max-width: 800px) {
  .notes {
    display: block;
    width: 260px;
  }

  .hero {
    align-items: center;
  }
}

@media (max-width: 560px) {
  .hero {
    flex-direction: column;
    align-items: stretch;
  }

  .notes {
    display: block;
    margin: 14px auto 0;
    width: min(100%, 280px);
  }
}