<h2>Card Icon</h2>
<div class="card" style="max-width: 25.75rem;">
    <div class="card__content">
        <div class="card__iconWrapper">
            <svg class="card__icon icon icon-layer-group">
                <use href="/main-icons-sprite.svg#layer-group" />
            </svg>
        </div>
        <span class="card__title h3">
            Title of card that will fall to two lines
        </span>
        <p class="card__description">
            Quisque tristique sagittis dignissim. Morbi vitae orci sollicitudin, viverra massa quis, eleifend velit. Aenean ac porta nisl. Ut eu bibendum nisi.
        </p>
        <a href="" class="card__button button">
            Default Button
        </a>
    </div>
</div>

@use "@imarc/pronto/resources/styles/imported" as pronto;

.card {
    $b: &;

    background-color: #fff;
    border-radius: 1rem;
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    overflow: hidden;
    max-width: 100%;

    &__imageWrapper {
        aspect-ratio: 1.78;
        overflow: hidden;
    }

    &__image {
        @include pronto.image-fit(cover);
    }

    &__tagList {
        list-style-type: none;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        margin-top: 0;
    }

    &__cta {
        margin-top: 0;
        display: flex;
        width: 100%;
        font-weight: 700;
    }

    &__meta {
        color: var(--color-gray-500);
        line-height: 1.5;
        margin: 0;
    }

    &__metaLink {
        text-underline-offset: 4px;
        font-weight: 700;
    }

    &__metaIcon {
        display: inline-block;
        height: 1.25em;
        width: 1.25em;
        margin-right: .5em;
        aspect-ratio: 1;
        vertical-align: text-bottom;
    }

    .tag {
        margin: 0;
    }

    &__title {
        font-size: pronto.fluid-rems(1.5, 2);
        margin: .5rem 0;
    }

    &__description {
        color: var(--color-gray-600);
        line-height: 2;
        margin: 0;
    }

    &__content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 1.5rem;
        gap: 1rem;
    }

    &__iconWrapper {
        block-size: 6rem;
        aspect-ratio: 1;
    }

    &.-condensed {
        #{$b}__description {
            line-height: 1.5;
        }
    }

    &.-flipped {
        flex-direction: column;
    }
}