@media screen and (min-width: 1000px) {
  #main-grid.grid {
    grid-template-columns: 40rem 1fr;
  }
}
@media screen and (min-width: 1200px) {
  #main-grid.grid {
    grid-template-columns: 40rem 1fr;
  }
}

.gallery {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.4rem;
  height: fit-content;
  direction: ltr;
}

.gallery:has(img.selected:hover) .gallery__glass {
  display: block;
}
.gallery__glass {
  position: absolute;
  cursor: none;
  display: none;
  right: calc(-100% - 1rem);
  top: 0px;
  height: 50%;
  width: 100%;
  border-radius: var(--radius);
  border: thin solid var(--color-divider);
  background-color: black;
}
@media screen and (min-width: 1000px) {
  .gallery {
    position: sticky;
    top: 3rem;
  }
}
.gallery img {
  width: 6rem;
  order: 1;
  border-radius: var(--radius);
  cursor: pointer;
}
.gallery img.selected {
  width: 100%;
  order: -1;
  cursor: unset;
}

#pay-card {
  height: max-content;
}
@media screen and (min-width: 1000px) {
  #pay-card {
    grid-column: 2/3;
  }
}
@media screen and (min-width: 1200px) {
  #pay-card {
    position: sticky;
    top: 3rem;
    grid-column: auto;
  }
}

#pay-card .btn {
  margin: 0;
}

#pay-card #pay-method-pool {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

label + .qty {
  margin-top: 0.4rem;
}
.qty {
  display: flex;
  width: fit-content;
  background-color: var(--color-divider);
  overflow: hidden;
  gap: 1px;
  border-radius: var(--radius);
  border: 1px solid var(--color-divider);
}
.qty input {
  border: 0;
  text-align: center;
  padding: 1rem 0.4rem;
  width: 100px;
  background-color: var(--color-card);
}

.qty input[type="number"]::-webkit-inner-spin-button,
.qty input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.qty input[type="number"] {
  -moz-appearance: textfield;
}
.qty button {
  background: var(--color-card);
  border-radius: 0 !important;

  padding: 1rem;
}