.card {
  position: relative;
  font-size: 1em;
  height: 6.25em;
  aspect-ratio: 1.7;
  border-radius: 1em;
  transition: background-color 0.3s ease;
  overflow: hidden;
  cursor: pointer;
}

.card span {
  position: absolute;
  bottom: 0.5em;
  left: 0.7em;
  font-weight: 500;
  z-index: 2;
  color: var(--blue);
}

html.touch_screen a.card:hover span {
  color: var(--blue);
}

html:not(.touch_screen) a.card:hover span {
  color: #fff;
}

.card-cashlib,
.card-pay-out-card,
.card-offline,
.card-online {
  background: var(--blue-light);
}

html:not(.touch_screen) .card-cashlib:hover,
html:not(.touch_screen) .card-pay-out-card:hover,
html:not(.touch_screen) .card-offline:hover,
html:not(.touch_screen) .card-online:hover {
  background: var(--blue);
}

html:not(.touch_screen) footer .card-cashlib:hover,
html:not(.touch_screen) footer .card-pay-out-card:hover,
html:not(.touch_screen) footer .card-offline:hover,
html:not(.touch_screen) footer .card-online:hover {
  background: var(--blue-medium);
}

.card-cashlib-direct,
.card-pay-out-voucher,
.card-resellers {
  background: var(--orange-light);
}

html:not(.touch_screen) .card-cashlib-direct:hover,
html:not(.touch_screen) .card-pay-out-voucher:hover,
html:not(.touch_screen) .card-resellers:hover {
  background: var(--orange);
}

.card-buy svg {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.3s ease;
  height: 60%;
  z-index: 1;
}
.card-offline svg {
  right: 20%;
}
html:not(.touch_screen) .card-offline:hover svg {
  transform: translateY(-50%) scale(140%) rotate(20deg);
}
.card-resellers svg {
  right: 7%;
}
html:not(.touch_screen) .card-resellers:hover svg {
  transform: translateY(-55%) scale(106%) rotate(25deg);
}
.card-online svg {
  right: 18%;
}
html:not(.touch_screen) .card-online:hover svg {
  transform: translateY(-50%) scale(130%) rotate(-17deg);
}

.card-buy svg path {
  fill: var(--blue);
}
.card-resellers svg path {
  fill: var(--orange);
}
html:not(.touch_screen) .card-buy:hover svg path {
  fill: #fff;
}

.card-product img {
  position: absolute;
  top: 50%;
  transition: transform 0.3s ease, opacity 0.2s ease;
  z-index: 1;
}

.card-cashlib img {
  height: 100%;
  right: 11%;
  transform: translateY(-51%) rotate(20deg) scale(89%);
}
html:not(.touch_screen) .card-cashlib:hover img {
  transform: translateY(-36%) rotate(10deg) scale(110%);
}

.card-cashlib-direct img {
  height: 100%;
  right: 13%;
  transform: translateY(-34%) rotate(8deg) scale(110%);
}
html:not(.touch_screen) .card-cashlib-direct:hover img {
  transform: translateX(-5%) translateY(-31%) rotate(3deg) scale(130%);
}

.card-pay-out-card img {
  width: 50%;
  right: 4%;
  transform: translateY(-60%) rotate(24deg);
  filter: drop-shadow(0.2em 0.2em 0.04em var(--blue));
}
html:not(.touch_screen) .card-pay-out-card:hover img {
  transform: translateX(5%) translateY(-65%) rotate(14deg);
  filter: drop-shadow(0.2em 0.2em 0.04em #fff);
}

.card-pay-out-voucher img {
  width: 50%;
  right: -2%;
  transform: translateY(-64%) rotate(-14deg) scale(1.4);
}
html:not(.touch_screen) .card-pay-out-voucher:hover img {
  transform: translateX(13%) translateY(-64%) rotate(9deg) scale(1.4);
}