/**
 * Pattern: Card 5
 *
 */



.card--5 .is-color_picker-field {
    max-width: 4.375rem;
}

.basse_work_color {
    max-width: 70px;
    aspect-ratio: 1 / 1;
    border-radius: clamp(0.25rem, 0.5vw + 0.05rem, 0.5rem);
    box-shadow: 0 2px 60px -2px rgb(6 5 66 / 0.06);
}

.card--5 svg {
    display: block;
    max-width: 100%;
}

.wp-block-group:where(.card--5--themes, .card--5--plugins) .value {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--wp--preset--spacing--fluid-0-5-step-0-75);
    padding-inline-start: initial;
}

.card--5 .value a:where(.meta-link--themes, .meta-link--plugins) {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    line-height: var(--wp--custom--line-height--md);
    padding: 0.375em 0.75em;
    border-radius: 0.25em;
    box-shadow: initial;
    white-space: nowrap;
    transition: background-color 0.3s ease-out;
}

.card--5 .meta-link > svg {
    height: 100%;
    width: auto;
    max-height: var(--wp--preset--font-size--body-md);
}

.card--5 .meta-link--themes {
    background-color: var(--wp--preset--color--accent-1-100);
    color: var(--wp--preset--color--accent-1-500);
}

.wp-block-group.card--5 .value .meta-link--themes:is(:hover, :focus, :focus-visible) {
    color: var(--wp--preset--color--accent-1-600);
    background-color: var(--wp--preset--color--accent-1-200);
}

.card--5 .meta-link--plugins {
    background-color: var(--wp--preset--color--primary-1-100);
    color: var(--wp--preset--color--primary-1-400);
}

.wp-block-group.card--5 .value .meta-link--plugins:is(:hover, :focus, :focus-visible) {
    color: var(--wp--preset--color--primary-1-500);
    background-color: var(--wp--preset--color--primary-1-200);
}