[xo-pfs] {
  --pfs-min: 10; /* default */
  --pfs-max: 60; /* default */
  --min-viewport: 40; /* default */
  --max-viewport: 120; /* default */
  /* calculator */
  --m: (var(--pfs-max) - var(--pfs-min)) /
    (var(--max-viewport) - var(--min-viewport));
  --size: clamp(
    calc(var(--pfs-min) * 1rem),
    calc(
      var(--m) * 100vw + var(--pfs-min) * 1rem - var(--m) * var(--min-viewport) *
        1rem
    ),
    calc(var(--pfs-max) * 1rem)
  );
}

.gift_card__header, .gift_card__main {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.gift_card__name {
  font-weight: 400;
  color: rgba(var(--color-foreground), 0.5);
  margin-top: 2rem;
}

.gift-card__price {
  margin-bottom: 2rem;
}

.gift-card__image-wrapper {
  margin-bottom: 4rem;
}

.gift-card__qr-code {
  margin-bottom: 2.5rem;
}

.gift-card__buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.gift-card__copy-button {
  all: unset;
  cursor: pointer;
  color: var(--color-foreground);
  text-decoration: underline;
  transition: 0.3s;
  text-underline-offset: 0.5rem;
  margin-bottom: 2rem;
}

.gift-card__copy-button:hover {
  color: rgba(var(--color-foreground), 0.5);
}

.gift-card__shopping-button, .gift-card__print-button {
  position: relative;
  width: 30rem;
  height: 5rem;
  overflow: hidden;
  background-color: rgba(var(--color-foreground));
  color: rgba(var(--color-background));
  margin-bottom: 1rem;
  border-radius: var(--buttons-radius);
  cursor: pointer;
}

.gift-card__print-button {
  background-color: rgba(var(--color-background));
  color: rgba(var(--color-foreground));
  border: solid 0.1rem rgba(var(--color-foreground));
  margin-bottom: 2rem;
  transition: 0.3;
}

.gift-card__shopping-before, .gift-card__print-before {
  transition: 0.3s;
  line-height: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.gift-card__shopping-after, .gift-card__print-after {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 5rem);
  transition: 0.3s;
  line-height: 0;
}

.gift-card__shopping-button:hover .gift-card__shopping-before {
  transform: translate(-50%, -5rem);
}
.gift-card__shopping-button:hover .gift-card__shopping-after {
  transform: translate(-50%, -50%);
}

.gift-card__print-button:hover {
  background-color: rgba(var(--color-foreground));
}
.gift-card__print-button:hover .gift-card__print-before {
  transform: translate(-50%, -5rem);
  color: rgba(var(--color-background));
}
.gift-card__print-button:hover .gift-card__print-after {
  transform: translate(-50%, -50%);
  color: rgba(var(--color-background));
}