/* card__list = original */
.card__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, auto));
    gap: 12px;
    justify-content: center;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* card__list = large */
.card__list--large {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, auto));
    gap: 12px;
    justify-content: center;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;

}

/* card__list = full */
.card__list--full {
    display: grid;
    grid-template-columns: 100%;
    gap: 12px;
    justify-content: center;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;

}

/* card__list = full */
.card__list--half {
    display: grid;
    grid-template-columns: 50% 50%;
    gap: 12px;
    justify-content: center;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;

}

/* card = 1col */
.card__item {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    max-width: 240px;
    height: auto;
    background-color: var(--co-milkwhite);
    padding: 12px;
    border: 0.5px solid var(--co-border);
    margin: 0;

}

/* card = 2col */
.card__item--2col {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    grid-template-areas: "img title"
        "img subtitle"
        "desc desc"
        "btn btn";
    grid-template-rows: auto;
    max-width: 240px;
    height: auto;
    background-color: var(--co-milkwhite);
    padding: 12px;
    border: 0.5px solid var(--co-border);
    margin: 0;

}

.card__item--full {
    /* position: relative; */
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    min-width: 240px;
    height: auto;
    background-color: var(--co-milkwhite);
    padding: 12px;
    border: 0.5px solid var(--co-border);
    margin: 0;

}

/* card = large */
.card__item--large {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    max-width: 100%;
    height: auto;
    background-color: var(--co-milkwhite);
    padding: 12px;
    border: 0.5px solid var(--co-border);
    margin: 0;
}

/* card = large */
.card__item--large--2col {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    grid-template-rows: 12px 1fr 1fr;
    grid-template-areas: "img title"
        /* "img subtitle" */
        "img desc"
        "img btn";
    max-width: 100%;
    height: auto;
    background-color: var(--co-milkwhite);
    padding: 12px;
    border: 0.5px solid var(--co-border);
    margin: 0;
}

.card_item-label {
    position: absolute;
    top: 0;
    background-color: var(--co-primary);
    color: var(--co-secondary);
    font-size: var(--fs-caption);
    padding: 0 4px;
}

.card_item-label--tertiary {
    position: absolute;
    top: 0;
    background-color: var(--co-tertiary);
    color: var(--co-secondary);
    font-size: var(--fs-caption);
    padding: 0 4px;
}

.card__image {
    width: 100%;
    min-width: 75px;
}

.card__image--xs {
    max-width: 25px;
    min-width: 25px;
}

.card__image--sm {
    max-width: 75px;
    min-width: 75px;
}

.card__image--2col {
    width: 100%;
    min-width: 75px;
    grid-area: img;
}

.card__image--2col--sm {
    width: 50%;
    min-width: 50px;
    grid-area: img;
}

.card__image--xs--circle--fix {
    width: 25px;
    width: 25px;
    border-radius: var(--rad-full);
}

.card__image--2col--sm--circle {
    width: 50%;
    min-width: 50px;
    grid-area: img;
    border-radius: var(--rad-full);
}

.card__item-title {
    font-size: var(--fs-bodytext);
    font-weight: 600;
    margin: 0;
    padding: 0;
    margin: 8px 0;
}

.card__item-title--2col {
    grid-area: title;
    font-size: var(--fs-bodytext);
    font-weight: 600;
    margin: 0;
    padding: 0;
}

.card__item-subtitle {
    font-size: var(--fs-subtext);
    color: var(--co-gray);
}

.card__item-subtitle--2col {
    grid-area: subtitle;
    font-size: var(--fs-subtext);
    color: var(--co-gray);
    font-weight: 500;
}

.card__item-desc--2col {
    grid-area: desc;
    font-size: var(--fs-subtext);
    text-align: justify;
    color: var(--co-gray);
    letter-spacing: 0.25px;
    margin: 4px 0;
}

.card__item-desc {
    font-size: var(--fs-subtext);
    text-align: justify;
    color: var(--co-gray);
    letter-spacing: 0.25px;
    margin: 4px 0;
}

.card__item-link {
    text-decoration: none;
}

.card__item-link--sm {
    width: 75px;

}

.card__item-link--col2 {
    grid-area: btn;
}

.card__desc {
    font-size: var(--fs-bodytext);
    color: var(--co-gray);
    text-align: justify;
}

/* info */
.card__item-info {
    display: grid;
    grid-template-columns: 25px auto 1fr;
    gap: 4px;
}

/* .card__link-google{
    border: 0.5px solid var(--co-border);
    display: grid;
    justify-content: center;
    padding: 4px;
    background-color: var(--co-secondary);
} */

@media (max-width:558px) {
    .card__item--large--2col {
        grid-template-columns: 1fr;
        grid-template-rows: auto 12px 2fr 1fr;
        grid-template-areas: "img"
            "title"
            "desc"
            "btn";
    }

    /* card = 2col */
    .card__item--2col {
        max-width: 320px;
    }
}