.card-grid {
    display: grid;
    gap: var(--space-m-l);
    grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
    margin-bottom: var(--space-m-l)
}

.card {
    border-radius: var(--space-s);
    display: grid
}

.card h3 {
    font-size: var(--font-size-3);
    margin-top: 0
}

.card ol,.card ul {
    padding: 0 0 0 1rem
}

.card figure,.card img {
    border-radius: var(--space-s);
    display: block;
    height: auto;
    margin: 0;
    width: 100%
}

.card * {
    color: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-decoration: none
}

.card--gradient,.card--teaser {
    background: linear-gradient(135deg,var(--wvib-red) 25%,var(--wvib-blue) 50%);
    background-position: 0;
    background-size: 250%;
    transition: all .4s ease
}

@supports (background-image: linear-gradient(in oklch to right, blue, red)) {
    .card--gradient,.card--teaser {
        background: linear-gradient(135deg in oklch,var(--wvib-red) 25%,var(--wvib-blue) 50%);
        background-position: 0;
        background-size: 250%;
    }
}

.card--gradient:has(.card__link):hover {
    background-position: 45%
}

.card--image {
    background: #000
}

.card--image.card--light {
    background: var(--merino-50,#f6f0e6)
}

.card--teaser a {
    display: flex;
    height: 100%
}

.card--image a {
    display: grid;
    position: relative
}

.card__text {
    align-content: end;
    grid-column: 1;
    grid-row: 1;
    hyphens: auto;
    padding: var(--space-m);
    width: 100%;
    z-index: 1
}

.card__text .card__caption {
    display: block;
    font-size: var(--font-size-1);
    margin-bottom: .5em
}

.card--top .card__text {
    align-content: start;
    display: grid;
    grid-template-rows: auto 1fr
}

.card--image .card__background {
    border-radius: var(--space-s);
    display: flex;
    grid-column: 1;
    grid-row: 1;
    height: 100%;
    overflow: hidden;
    width: 100%;
    z-index: 0
}

.card--image .card__background img {
    --_top: 30%;
    --_bottom: 84%;
    backface-visibility: hidden;
    height: 100%;
    mask-image: linear-gradient(to bottom,#000 var(--_top),rgba(0,0,0,.25) var(--_bottom));
    object-fit: cover;
    transition: all .4s cubic-bezier(.25,.1,0,1);
    width: 100%;
    will-change: transform
}

.card--teaser:has(.card__link):hover {
    cursor: pointer;
    transform: scale(1.03) translateZ(0)
}

.card.card--community {
    background-color: var(--wvib-light-grey);
    color: var(--wvib-text-black);
    transition: all .2s ease;
}

.card.card--community *,
.card.card--community h3 {
    color: var(--wvib-text-black);
    transition: all .2s ease;
    font-size: var(--font-size-1);
}

.card.card--community:hover {
    background-color: var(--wvib-blue);
    color: var(--wvib-white);
}

.card.card--community:hover * {
    color: var(--wvib-white);
}

.card.card--community .card__text {
  display: flex;
  flex-direction: column;
  justify-content: space-between; 
}

.card.card--community .card__arrow {
    align-self: flex-end;
    float: right;
    margin-right: -0.75rem;
    margin-bottom: -0.75rem;
}