.cardsContainer {
    display: grid;
    overflow: hidden;
    border-radius: 12px;
    padding: var(--shadowOffset);
    margin: calc(var(--shadowOffset) * -1);
}

.cardsContainer .cards {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-around;
    gap: 20px;
    grid-area: 1/1;
    z-index: 1;
    border-radius: inherit;
}

.cardItems {
    --shadowOffset: 16px;
    --paddingSmall: 14px;
    --paddingBig: 16px;
    padding-block: 25px 44px;
}

@media (min-width: 480px) {
    .cardItems {
        padding-block: 48px 44px;
    }
}

.cardItems .cardItem {
    display: flex;
    flex-direction: column;
    padding-inline: 6px;
    padding-block: 6px 12px;
    gap: var(--paddingBig);
    border-radius: inherit;
    background: var(--color-bg);
    box-shadow: 0 2px var(--shadowOffset) rgba(0, 0, 0, 0.085);
    min-width: 280px;
    max-width: 352px;
    flex-grow: 1;
    position: relative;
    overflow: hidden;
    container-type: inline-size;
}

@media (min-width: 480px) {
    .cardItems .cardItem {
        padding-inline: var(--paddingSmall);
        padding-block: var(--paddingSmall) var(--paddingBig);
        gap: 20px;
        border-radius: 16px;
    }
}

.cardItems .card {
    --cardPadding: 0.6cqw;
    display: grid;
    grid-template-areas:
        "logo cardTags cardTags"
        "number number number"
        "holderLabel codeLabel expiryLabel"
        "holderValue codeValue expiryValue";
    grid-template-columns: minmax(0, 40%) minmax(0, auto) auto;
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    width: 100%;
    column-gap: var(--paddingSmall);
    aspect-ratio: 1.76/1;
    position: relative;
    isolation: isolate;
    border-radius: 3.4cqw;
    padding-inline: calc(5.5cqw + var(--cardPadding));
    padding-block: calc(var(--paddingBig) + var(--cardPadding))
        calc(5.5cqw + var(--cardPadding));
    user-select: none;
}

.cardItems .card .border {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    z-index: 1;
    pointer-events: none;
}

.cardItems .card::before {
    content: "";
    position: absolute;
    border-radius: inherit;
    width: calc(100% - var(--cardPadding) * 2);
    height: calc(100% - var(--cardPadding) * 2);
    inset-inline-start: var(--cardPadding);
    inset-block-start: var(--cardPadding);
    background: linear-gradient(180deg, #fdfdfd 0%, #d4d4d4 100%), #d4d3d3;
    box-shadow:
        0 0 1px 2.4px rgba(0, 0, 0, 0.05) inset,
        0 1px 1px 0 rgba(255, 255, 255, 0.54) inset,
        0.5px 0.7px 0.4px 0 rgba(255, 255, 255, 0.5) inset,
        -0.5px -0.5px 0.2px 0 rgba(197, 197, 197, 0.6) inset,
        -1px 0 0.6px 0 rgba(0, 0, 0, 0.25) inset,
        1px 1px 1px 0 #fff inset;
}

.cardItems .card[data-card-type="gold"]::before {
    background:
        radial-gradient(
            71.97% 139.87% at 30.77% -20.31%,
            #fff1b7 3.8%,
            #ffd478 59.86%
        ),
        #fff;
    box-shadow:
        0 0 4px 2px #43260035 inset,
        0 0 4px 2px #dc7d0035 inset,
        0.5px 0.7px 0.4px 0 rgba(255, 255, 255, 0.04) inset,
        -0.5px -0.5px 0.2px 0 rgba(197, 197, 197, 0.05) inset;
}

.cardItems .card[data-card-type="black"]::before {
    background:
        radial-gradient(109.32% 72.43% at 50% 12.35%, #101010 0%, #000 100%),
        radial-gradient(
            63.86% 75.58% at 2.07% 0%,
            rgba(208, 208, 208, 0.35) 0%,
            rgba(255, 255, 255, 0) 100%
        );
    background-blend-mode: soft-light, normal, normal;
    box-shadow:
        0 1px 1px 0 rgba(255, 255, 255, 0.054) inset,
        0.5px 0.7px 0.4px 0 rgba(255, 255, 255, 0.05) inset,
        -0.5px -0.5px 0.2px 0 rgba(197, 197, 197, 0.06) inset;
}

.cardItems
    .cardItem
    .card
    :where(.logo, .number, .infoItemLabel, .infoItemValue, .cardTag) {
    z-index: 3;
    position: relative;
}

.cardItems .card .logo {
    display: block;
    max-width: 11cqw;
    grid-area: logo;
    mix-blend-mode: luminosity;
}

.cardItems .card .cardTags {
    display: flex;
    align-items: center;
    gap: 1.5cqw;
    justify-content: flex-end;
    width: 100%;
    grid-area: cardTags;
    place-self: self-start;
}

.cardItems .card .cardTag {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.2cqw 2.5cqw;
    gap: 0.6cqw;
    border-radius: 4.24cqw;
    box-shadow:
        -1px -1px 1px 0 rgba(255, 255, 255, 0.1) inset,
        -1px -1px 1px 0 rgba(85, 85, 85, 0.14) inset,
        1px 1px 1px 0 #fff inset,
        1px 1px 1px 0 rgba(0, 0, 0, 0.5);
    width: max-content;
    position: relative;
    min-height: 7.4cqw;
    font-family: Roboto;
}

.cardItems .card .cardTag::before {
    content: "";
    position: absolute;
    border-radius: inherit;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.1) 0%,
        rgba(255, 255, 255, 0.25) 50%,
        rgba(255, 255, 255, 0.75) 100%
    );
    mix-blend-mode: color-burn;
    inset: 0;
}

.cardItems .card[data-card-type="black"] .cardTag::before {
    mix-blend-mode: hard-light;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.3) 0%,
        rgba(255, 255, 255, 0.25) 75%,
        rgba(255, 255, 255, 0.45) 100%
    );
}

.cardItems .card .cardTag .icon {
    flex-shrink: 0;
}

.cardItems .card[data-card-type="black"] .cardTag {
    color: var(--color-font-inverse);
}

.cardItems .card[data-card-type="black"] .cardTag .text {
    background: linear-gradient(180deg, #f4f4f4 0%, #b8b8b8 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.cardItems .card .cardTag .text {
    font-size: 3cqw;
    font-weight: 600;
    line-height: 112%;
    background: linear-gradient(180deg, #666 0%, #000 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.cardItems .card .cardTag.nfc .icon {
    width: 2.5cqw;
}

.cardItems .card .cardTag.tds .icon {
    width: 2.5cqw;
}

.cardItems .card .logo:nth-child(1) {
    z-index: 4;
    filter: grayscale(1);
    mix-blend-mode: plus-lighter;
}

.cardItems .card .logo:nth-child(2) {
    filter: grayscale(1) drop-shadow(1.5px 1.5px 1px rgba(0, 0, 0, 0.5));
    mix-blend-mode: luminosity;
}

.cardItems .card[data-card-type="black"] .logo:nth-child(1) {
    z-index: 4;
    filter: grayscale(1) contrast(1.75) brightness(1.75);
    mix-blend-mode: hard-light;
}

.cardItems .card[data-card-type="black"] .logo:nth-child(2) {
    mix-blend-mode: difference;
}

.cardItems .card .number {
    font-family: "orcas";
    display: grid;
    font-size: 6cqw;
    font-weight: 400;
    color: transparent;
    text-transform: uppercase;
    margin-block: auto;
    padding-block-start: 5%;
    grid-area: number;
}

.cardItems .card .number::before {
    content: attr(data-text);
    position: relative;
    z-index: 2;
    background: linear-gradient(180deg, #fff 20%, #dbdbdb 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    grid-area: 1/1;
}

/* .cardItems .card[data-card-type="black"] .number::before {
    mix-blend-mode: color-dodge;
} */

.cardItems .card .number::after {
    content: attr(data-text);
    position: relative;
    z-index: 1;
    text-shadow:
        0 2px 1px rgba(0, 0, 0, 0.24),
        0.294px 0.736px 0.294px rgba(0, 0, 0, 0.74);

    grid-area: 1/1;
}

.cardItems .card .infoItemLabel {
    color: var(--color-gray);
    font-size: 2.4cqw;
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
    text-transform: uppercase;
    white-space: nowrap;
    margin-block-start: 1.5cqw;
    mix-blend-mode: luminosity;
}

.cardItems .card .infoItemLabel.holder {
    grid-area: holderLabel;
}

.cardItems .card .infoItemLabel.code {
    margin-inline: auto;
    grid-area: codeLabel;
}

.cardItems .card .infoItemLabel.expiry {
    grid-area: expiryLabel;
    text-align: right;
}

.cardItems .card .infoItemValue.holder {
    grid-area: holderValue;
}

.cardItems .card .infoItemValue.code {
    margin-inline: auto;
    grid-area: codeValue;
}

.cardItems .card .infoItemValue.expiry {
    grid-area: expiryValue;
    text-align: right;
}

.cardItems .card .infoItemValue {
    font-family: "orcas";
    display: grid;
    font-size: 3.4cqw;
    line-height: 125%;
    font-weight: 400;
    color: transparent;
    text-transform: uppercase;
    margin-block-start: 1cqw;
}

.cardItems .card .infoItemValue::before {
    content: attr(data-text);
    position: relative;
    z-index: 2;
    background: linear-gradient(180deg, #fff 20%, #dfdfdf 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    grid-area: 1/1;
}

.cardItems .card .infoItemValue::after {
    content: attr(data-text);
    position: relative;
    z-index: 1;
    text-shadow: 0.192px 0.479px 0.192px rgba(0, 0, 0, 0.74);
    grid-area: 1/1;
}

.cardItems .cardItem .data {
    padding-inline: 6px;
}

@media (min-width: 480px) {
    .cardItems .cardItem .data {
        padding-inline: 8px;
    }
}

.cardItems .cardItem .data > .title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 16px;
    font-weight: 700;
    line-height: 120%;
}

.cardItems .cardItem:has(.card[data-card-type="black"]) .data > .title {
    color: transparent;
    background: linear-gradient(
        45deg,
        var(--color-font) 33%,
        hsl(from var(--color-white) h s 70%) 41.25%,
        var(--color-font) 49.5%,
        hsl(from var(--color-white) h s 70%) 57.75%,
        var(--color-font) 66%
    );
    background-size: 300% auto;
    background-clip: text;
    -webkit-background-clip: text;
    background-position: 0% center;
    color: transparent;
    animation: shimmer 10s linear infinite 2s;
}

@keyframes shimmer {
    20%,
    to {
        background-position: -150% center;
    }
}

@media (min-width: 480px) {
    .cardItems .cardItem .data > .title {
        gap: var(--paddingSmall);
        font-size: 20px;
    }
}

.cardItems .hot {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100px;
    background: linear-gradient(146deg, #000aff -19.47%, #08e1ff 100.96%);
    color: var(--color-font-inverse);
    text-align: center;
    font-feature-settings:
        "liga" off,
        "clig" off;
    font-size: 10px;
    padding: 2px 12px 2px 12px;
    font-weight: 700;
    line-height: 133%;
    width: max-content;
}

@media (min-width: 480px) {
    .cardItems .hot {
        font-size: 12px;
        padding: 4px 16px 2px 16px;
    }
}

.cardItems .cardItem .data > .description {
    display: flex;
    align-items: center;
    gap: 2px;
    color: var(--color-gray-11);
    font-size: 12px;
    font-weight: 400;
    line-height: 114%;
    margin-block-start: 2px;
}

@media (min-width: 480px) {
    .cardItems .cardItem .data > .description {
        font-size: 14px;
        margin-block-start: 4px;
        gap: 4px;
    }
}

.cardItems .cardItem .data .rate {
    font-size: 12px;
    font-weight: 600;
    line-height: 114%;
    margin-block-start: var(--paddingBig);
}

@media (min-width: 480px) {
    .cardItems .cardItem .data .rate {
        font-size: 14px;
        margin-block-start: 24px;
    }
}

.cardItems .cardItem .data .service {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-block-start: var(--paddingBig);
}

@media (min-width: 480px) {
    .cardItems .cardItem .data .service {
        gap: var(--paddingSmall);
        margin-block-start: 24px;
    }
}

.cardItems .cardItem .data .service .label {
    font-size: 12px;
    font-weight: 600;
    line-height: 114%;
}

@media (min-width: 480px) {
    .cardItems .cardItem .data .service .label {
        font-size: 14px;
    }
}

.cardItems .cardItem .data .service .value {
    color: var(--color-gray-11);
    font-size: 10px;
    font-weight: 400;
    line-height: 166%;
}

@media (min-width: 480px) {
    .cardItems .cardItem .data .service .value {
        font-size: 12px;
    }
}

.cardItems .cardItem .data .service .value .free {
    color: var(--color-success);
}

.cardItems .cardItem .data .support {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-block-start: var(--paddingBig);
}

@media (min-width: 480px) {
    .cardItems .cardItem .data .support {
        gap: var(--paddingSmall);
        margin-block-start: 24px;
    }
}

.cardItems .cardItem .data .support .label {
    font-size: 12px;
    font-weight: 600;
    line-height: 114%;
}

@media (min-width: 480px) {
    .cardItems .cardItem .data .support .label {
        font-size: 14px;
    }
}

.cardItems .cardItem .data .support .typeItems {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cardItems .cardItem .data .support .typeItem {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--color-gray-10);
    font-size: 10px;
    line-height: 166%;
}

@media (min-width: 480px) {
    .cardItems .cardItem .data .support .typeItem {
        font-size: 12px;
    }
}

.cardItems .cardItem .data .instantLabel {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--color-primary-accent);
    font-size: 10px;
    font-weight: 500;
    line-height: 166%;
    margin-block-start: var(--paddingSmall);
}

@media (min-width: 480px) {
    .cardItems .cardItem .data .instantLabel {
        font-size: 12px;
        margin-block-start: 12px;
        gap: 6px;
    }
}

.cardItems .cardItem .price {
    padding-inline: 6px;
    position: relative;
    padding-block-start: var(--paddingBig);
}

@media (min-width: 480px) {
    .cardItems .cardItem .price {
        padding-inline: 8px;
        padding-block-start: 20px;
    }
}

.cardItems .cardItem .price::before {
    content: "";
    position: absolute;
    width: calc(100% - var(--paddingBig));
    inset-inline-start: var(--paddingSmall);
    height: 0;
    inset-block-start: 0;
    border-block-start: 1px solid var(--color-light-2);
    pointer-events: none;
}

@media (min-width: 480px) {
    .cardItems .cardItem .price::before {
        width: calc(100% - var(--paddingBig));
        inset-inline-start: var(--paddingBig);
    }
}

.cardItems .cardItem .price .current {
    color: var(--color-gray-11);
    font-size: 12px;
    font-weight: 400;
    line-height: 171%;
}

@media (min-width: 480px) {
    .cardItems .cardItem .price .current {
        font-size: 14px;
    }
}

.cardItems .cardItem .price .current .value {
    color: var(--color-font);
    font-size: 28px;
    font-weight: 600;
    line-height: 121%;
}

.cardItems .cardItem .price .alt {
    color: var(--color-gray-10);
    font-size: 12px;
    font-weight: 400;
    line-height: 166%;
}

.cardItems .issueButton {
    display: flex;
    width: calc(100% - 8px);
    margin-inline: auto;
    border-radius: 16px;
    box-shadow: 4px 4px 12px 0 rgba(255, 255, 255, 0.16) inset;
}