<h2>Card Tags</h2>
<div class="card" style="max-width: 25.75rem;">
    <div class="card__content">
        <ul class="card__tagList">
            <li class="card__tagListItem">
                <p class="tag">
                    <svg class="tag__icon">
                        <use href="/main-icons-sprite.svg#tag" />
                    </svg>
                    Simple Tag
                </p>
            </li>
            <li class="card__tagListItem">
                <p class="tag">
                    <svg class="tag__icon">
                        <use href="/main-icons-sprite.svg#tag" />
                    </svg>
                    Simple Tag
                </p>
            </li>
        </ul>
        <span class="card__title h3">
            Title of card that will fall to two lines
        </span>
        <p class="card__meta">
            Posted Aug 12, 2023 by <a href="#" class="card__metaLink">Daphne Writesposts</a>
        </p>
        <p class="card__meta">
            <svg class="card__metaIcon">
                <use href="/main-icons-sprite.svg#clock" />
            </svg>15 Minute Read</a>
        </p>
    </div>
        <div class="card__imageWrapper">
        <img src="https://panoramicireland.com/media/k2/items/cache/cb9c495b17bc28a44ffb50c55572ed63_XL.jpg" alt="" class="card__image">
    </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;
    }
}