@layer components {
  .modal {
    --modal-padding-x: 1rem;
    background-color: var(--color-surface-light);

    @media (min-width: 768px) {
      --modal-padding-x: 1.5rem;
    }
  }

  .modal__navbar {
    padding: 1.5rem var(--modal-padding-x);
    margin-bottom: 1.5rem;
    background-color: var(--color-surface-light-high);
    position: sticky;
    top: 0;
  }

  .modal__footer {
    padding: 1.5rem var(--modal-padding-x) 2rem;
    margin-top: 2rem;
    background-color: var(--color-surface-light-high);
  }

  .modal__back-button {
    aspect-ratio: 1/1;
  }
}