@import url("https://fonts.googleapis.com/css?family=Cardo:400i|Rubik:400,700&display=swap");
:root {
  --d: 700ms;
  --e: cubic-bezier(0.19, 1, 0.22, 1);
}

.page-content {
  display: grid;
  grid-gap: 1rem;
  padding: 1rem;
  max-width: 1024px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .page-content {
    padding: 0rem;
    height: 250px;
  }
}

.nfc-card-slider-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  padding: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}
@media (max-width: 768px) {
  .nfc-card-slider-row {
    flex-wrap: nowrap;
    width: 100vw;
    padding-bottom: 1rem;
    margin-left: 0;
    margin-right: 0;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

:root {
  --card-size: clamp(350px, 40vw, 150px);
  --card-ar: 2 / 1;
  --x: calc(50vw * 1);
  --y: calc((50vh - (var(--card-size) * 0.25)) * 1);
  --spotlight: 50vmin;
  --backdrop: black;
  --radius: 14;
  --border: 3;
  --backup-border: hsl(0 0% 10% / 0.2);
  --size: 200;
  --bg-spot-opacity: 0.16;
  --border-light-opacity: 1;
  --border-spot-opacity: 0.75;
}

*:after,
*:before {
  box-sizing: border-box;
}

.card-slider {
  /* Article layout */
}
.card-slider {
  background-color: #03ccda;
}
.card-slider .card {
  aspect-ratio: var(--card-ar);
  border-radius: calc(var(--radius) * 1px);
  display: grid;
  grid-template: 1fr 1fr 1fr/1fr auto;
  position: relative;
  width: var(--card-size);
}
.card-slider .card *::-moz-selection {
  background: hsl(var(--hue), 80%, 40%);
}
.card-slider .card *::selection {
  background: hsl(var(--hue), 80%, 40%);
}
.card-slider ul {
  display: flex;
  gap: 4rem;
  margin: 0;
  -webkit-mask: linear-gradient(90deg, transparent, white, transparent);
          mask: linear-gradient(90deg, transparent, white, transparent);
  overflow: auto;
  padding-inline: calc(50vw - var(--card-size) * 0.5);
  scroll-snap-type: x mandatory;
  width: 100%;
}
.card-slider li {
  display: grid;
  place-items: center;
  scroll-snap-align: center;
  position: relative;
}
.card-slider li::after {
  --border-size: calc(var(--border) * 1px);
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(calc(var(--spotlight) * 0.15) calc(var(--spotlight) * 0.15) at calc(var(--px, 0) * 1px) calc(var(--py, 0) * 1px), hsl(0, 0%, 100%), transparent);
  background-color: var(--backdrop, transparent);
  background-size: calc(100% + 2 * var(--border-size)) calc(100% + 2 * var(--border-size));
  background-position: 50% 50%;
  background-attachment: fixed;
  background-color: transparent;
  border: var(--border-size) solid transparent;
  border-radius: calc(var(--radius) * 1px);
  -webkit-mask: linear-gradient(transparent, transparent), linear-gradient(white, white);
          mask: linear-gradient(transparent, transparent), linear-gradient(white, white);
  -webkit-mask-clip: padding-box, border-box;
          mask-clip: padding-box, border-box;
  -webkit-mask-composite: source-in, xor;
          mask-composite: intersect;
}
.card-slider::after {
  width: calc(var(--card-size) * 0.5);
  opacity: 0.25;
  z-index: 2;
  translate: -50% -75%;
}

/* ...existing code... */
@media (max-width: 426px) {
  .nfc-card-slider-row {
    flex-wrap: nowrap !important;
    width: 100vw;
    overflow-x: auto;
    display: flex !important;
    gap: 1rem;
    padding-bottom: 1rem;
    margin-left: 0;
    margin-right: 0;
    padding-left: 1rem;
    padding-right: 1rem;
    scroll-snap-type: x mandatory;
  }
  .nfc-card-slide {
    min-width: 80vw;
    flex: 0 0 auto;
    padding-left: 0;
    padding-right: 0;
    scroll-snap-align: start;
  }
  .nfc-card-slider-row::-webkit-scrollbar {
    display: none;
  }
  .product-card {
    height: 250px;
    width: 250px;
  }
}
/* ...existing code... *//*# sourceMappingURL=nfc_home.css.map */