@keyframes rotate {
  from {
    transform: rotate(0turn);
  }
  to {
    transform: rotate(1turn);
  }
}

.checkout {
  display: grid;
  row-gap: 2rem;
  column-gap: 4rem;
}

.checkout .error {
  grid-column-start: span 12;
}

.checkout.is-loading {
  color: var(--color-gray-700);
}
.checkout button[type="submit"] {
  display: flex;
  align-items: center;
}
.checkout button[type="submit"]::after {
  content: '';
  display: none;
  width: 0.7rem;
  height: 0.7rem;
  margin-inline-start: var(--spacing-s);
  border-radius: 50%;
  border: 2px solid var(--color-white);
  border-bottom-color: transparent;
  animation: 1.5s rotate linear infinite;
}
.checkout.is-loading button[type="submit"]::after {
  display: block;
}

@media (min-width: 1024px) {
  .checkout {
/*    grid-template-columns: 1fr auto;
            grid-template-columns: 1fr auto auto;
    grid-auto-flow: dense;
    align-items: start;*/

grid-template-rows: 1fr auto;
        grid-template-columns: 1fr auto auto;
        grid-auto-flow: dense;
        align-items: start;
        max-width: 1250px;
        margin: auto;


  }

  .notice {
    justify-self: end;
    /* text-align: right; */
    /* max-width: 700px; */
    /* justify-self: end; */
    /* text-align: right;    font-size: 12px; */
    grid-column-end: 3;

    /* flex: 1 0 30%; */
    /* margin-left: auto; */
    /* grid-column: span 2; */
    /* grid-row-end: 5; */
    background-color: transparent;
    /* grid-column: 1 / -1; */
    /* grid-column: span 2;*/
  }

  .checkout .cart {
    position: sticky;
    top: var(--spacing-m);
    grid-row-end: span 2;
  }
}