/* @group Cards Row (module) */

.cards-row {
    display: flex;
    flex-direction: column;
    position: relative;
}

.cards-row .card {
    background: var(--light-gray-1);
    border: 1px solid var(--light-gray-2);
    display: flex;
    flex-direction: column;
}

.cards-row .card + .card {
    border-top: .1rem solid var(--light-gray-2);
}

.cards-row .card-header {
    align-items: baseline;
    column-gap: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.cards-row .card-title,
.cards-row .card-description {
    margin-top: 0;
}

.cards-row .card-link {
    flex: 0 0 auto;
}

@media only screen and (min-width: 48rem) {

    .cards-row {
        --cards-row-gradient-x: linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(226, 230, 235) 10%, rgb(226, 230, 235) 90%, rgb(255, 255, 255) 100%);
        --cards-row-gradient-y: linear-gradient(0deg, rgb(255, 255, 255) 0%, rgb(226, 230, 235) 10%, rgb(226, 230, 235) 90%, rgb(255, 255, 255) 100%);
        flex-direction: row;
    }

    .cards-row::before,
    .cards-row::after,
    .cards-row .card:nth-child(1)::before,
    .cards-row .card:nth-child(2)::before,
    .cards-row .card:nth-child(2)::after,
    .cards-row .card:nth-child(3)::after {
        content: '';
        display: block;
        position: absolute;
    }

    .cards-row::before,
    .cards-row::after {
        background: var(--cards-row-gradient-x);
        height: 1px;
        inset-inline: -5rem;
    }

    .cards-row::before {
        top: 0;
    }

    .cards-row::after {
        bottom: 0;
    }

    .cards-row .card {
        flex: 1 1 0;
        min-width: 0;
    }

    .cards-row .card + .card {
        border-left: 0;
        border-top-width: 1px;
    }

    .cards-row .card:nth-child(2) {
        position: relative;
    }

    .cards-row .card:first-child {
        border-radius: 2rem 0 0 0;
        overflow: hidden;
    }

    .cards-row .card:last-child {
        border-radius: 0 2rem 0 0;
        overflow: hidden;
    }

    .cards-row .card:nth-child(1)::before,
    .cards-row .card:nth-child(2)::before,
    .cards-row .card:nth-child(2)::after,
    .cards-row .card:nth-child(3)::after {
        background: var(--cards-row-gradient-y);
        inset-block: -3.9rem;
        width: 1px;
    }

    .cards-row .card:nth-child(1)::before {
        left: 0;
    }

    .cards-row .card:nth-child(2)::before {
        left: 0;
    }

    .cards-row .card:nth-child(2)::after {
        right: 0;
    }

    .cards-row .card:nth-child(3)::after {
        right: 0;
    }
}

/* @end */