@media (max-width: 1024px) {
  .hero__grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero__content p {
    margin-inline: auto;
  }

  .hero__actions,
  .hero__rating,
  .hero__brands {
    justify-content: center;
  }

  .hero__visual {
    order: -1;
  }

  .hero__art {
    max-width: 420px;
    margin-inline: auto;
  }
}

@media (max-width: 860px) {
  .navbar__links {
    display: none;
  }

  .navbar__actions .btn-secondary {
    display: none;
  }

  .navbar__toggle {
    display: flex;
  }
}

@media (min-width: 861px) {
  .navbar__mobile {
    display: none;
  }
}

@media (max-width: 640px) {
  :root {
    --container-padding: 20px;
  }

  section {
    padding-block: 64px;
  }

  .hero {
    padding-top: calc(var(--nav-height) + 40px);
  }

  .hero__actions {
    flex-direction: column;
    width: 100%;
  }

  .hero__actions .btn {
    width: 100%;
  }

  .hero__float-card.card-1 {
    left: 0;
    top: -6%;
  }

  .hero__float-card.card-2 {
    right: 0;
    bottom: -6%;
  }
}