.template-product .product-meta {
  height: -moz-max-content;
  height: max-content;
  --tw-bg-opacity: 1;
  background-color: rgb(249 249 249 / var(--tw-bg-opacity));
  padding: 1rem;
}

@media (min-width: 1024px) {

  .template-product .product-meta {
    position: sticky;
    top: 9rem;
    padding: 2rem;
  }
}

.meta-label {
  margin-bottom: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.meta-label::before {
  content: '';
  display: block;
  height: 0.5rem;
  width: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(37 197 216 / var(--tw-bg-opacity));
}

.template-product .product-form {
  position: sticky;
  bottom: 1rem;
  height: -moz-max-content;
  height: max-content;
}

@media (min-width: 1024px) {

  .template-product .product-form {
    top: 9rem;
    bottom: auto;
  }
}

.form-product .input-quantity {
  border-style: none;
  padding: 1rem;
  text-align: center;
  --tw-text-opacity: 1;
  color: rgb(37 197 216 / var(--tw-text-opacity));
}

.product-assets {
  display: flex;
  width: 100%;
  flex: 1 1 0%;
  scroll-snap-type: x var(--tw-scroll-snap-strictness);
  --tw-scroll-snap-strictness: mandatory;
  align-items: flex-start;
  gap: 0.5rem;
  overflow-x: auto;
}

@media (min-width: 1024px) {

  .product-assets {
    display: grid;
  }
}

.product-assets {
  scroll-behavior: smooth;
}

.product-asset--img {
  pointer-events: none;
  display: block;
  width: 100%;
  flex-shrink: 0;
  scroll-snap-align: center;
}

@media (min-width: 1024px) {

  .product-asset--img {
    pointer-events: auto;
  }
}