/* Card Upgrade Page CSS Module */

.content-area,
.site-main,
.page-wrapper,
.page-container {
    height: 100%;
}

.upgrade-items-wrapper {
    height: 100%;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 4.375rem 1fr;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 1fr;
    gap: 4.375rem;
    max-width: 54.375rem;
    margin-inline: auto;
}

.upgrade-item {
    min-height: 20rem;
    border-radius: 2.375rem;
    padding: 1.875rem 2.5rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    gap: 2rem;
    background-size: cover;
    aspect-ratio: 0.65;
}

.upgrade-item .title {
    font-family: var(--font-orbitron);
    font-weight: 700;
    font-size: 1.5rem;
    color: #fff;
}

@media screen and (max-width: 480px) {

    .content-area,
    .site-main,
    .page-wrapper,
    .page-container {
        height: unset;
    }
    .upgrade-items-wrapper {
        height: unset;
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .upgrade-item {
        position: relative;
        -webkit-isolation: isolate;
        isolation: isolate;
        min-height: unset;
        aspect-ratio: 1;
        gap: 4rem;
        overflow: hidden;
    }

    .upgrade-item::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -1;
        background: -webkit-gradient(linear, left bottom, left top, from(black), color-stop(60%, transparent));
        background: -o-linear-gradient(bottom, black, transparent 60%);
        background: linear-gradient(0deg, black, transparent 60%);
    }

}