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

.checkout-title {
  font-size: var(--size);
  -webkit-text-stroke-width: calc(var(--size) * .04);
  -webkit-text-stroke-color: var(--color-key);
  -webkit-text-fill-color: rgba(96, 85, 81, .5);
  text-transform: uppercase;
  margin-bottom: 3rem;
}


.checkout > .adress {
  row-gap: .5rem !important;
}

.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) {
  .cp-div  {
 
  }
  .cp-div > .adress {
    order: 1;
  }

  .cp-div  > .cart {
    position: sticky;
    top: 15rem;
    order: 2;
    grid-row-end: span 2;
    margin-top: 2rem;
  }
}
@media (min-width: 300px) {

  .checkout-title  {
      --size: 3rem;
  }
  .checkout > .grid {
    order: 2;
  }
  .cp-div  > .cart {
    position: static;
    margin-bottom: 3rem;
  }
  .cp-div {
    display: flex;
    flex-flow: column;
    flex-direction: column-reverse;
   
  
  }
}
@media (min-width: 375px) {

  .checkout-title  {
      --size: 3rem;
  }

}

@media (min-width: 425px) {
  .checkout-title  {
      --size: 3.5rem;
      
  }

}

@media (min-width: 500px) {
  .checkout-title  {
      --size: 6rem;
  }


}

@media (min-width: 800px) {
  .cp-div {
    flex-direction: row-reverse;
   

  }
  .cp-div   .cart {
    position: sticky;
    top: 15rem;
    order: 1;
    grid-row-end: span 2;
    margin-top: 2rem;
  }
  .adress {
    width: 48%;
    margin-right: 4%;
  }
  .cp-div  > .cart-div {
    width: 48%;

  }
}

@media (min-width: 1000px) {
  .checkout-title  {
      --size: 7.5rem;
  }

}

@media (min-width: 1200px) {
  .checkout-title  {
      --size: 9rem;
  }
}
abbr{
  color: key
}
.input-key{
  border: var(--color-key);
}