.cards h5,
.cards p {
    margin: 0;
    padding: 0;
}

.cards {
    display: grid;
    gap: 0.63rem;
    margin: 0 auto;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}

.three-cards, 
.four-cards{
    grid-template-columns: 1fr;
    grid-template-rows: auto;
}

.three-cards {
    gap : 1.69rem
}

.four-cards {
    gap: 1.25rem;
}

.card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    background: var(--background-card-gradient);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
}

.card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url("/assets/card-background.svg") no-repeat center/cover;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    clip-path: inset(0 round var(--border-tear-drop));
}
  
.card:hover::after {
    opacity: 1;
}

.card:not(:has(.card-background-image a)):hover::after {
    opacity: 0;
}

.three-cards .card {
    padding: 1.5rem 1.89rem;
    aspect-ratio: 1/1;
    border-radius: var(--border-tear-drop-threecard);
}

.four-cards .card {
    width: 100%;
    padding: 2.5rem;
    aspect-ratio: 2/3;
    border-radius: var(--border-tear-drop-fourcard);
}

.card-header {
    display: flex;
    flex-direction: column;
    gap: 0.57rem;
    z-index: 1;
}

.card-header > h5,
.card-header > h5 > strong {
    font-size: var(--card-font-s);
    color: var(--text-inverse);
    text-shadow: var(--text-shadow);
}

.card-link-icon {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    z-index: 1;
}

.four-cards .card-link-icon {
    bottom: 2rem;
    right: 2rem;
}

.card-link-icon a.button:any-link,
.card-link-icon > p > span,
.button .icon {
    all: unset;
}

.icon-cardarrow {
    display: contents;
}

.card-background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.card-background-image > p > a {
    font-size: 0;
}

 /* stylelint-disable no-descending-specificity */
.card-background-image > p,
.card-background-image > p > picture > img {
    height: 100%;
    object-fit: cover;
}

.icon-cardarrow > img,
.card-header .icon,
.card-header .icon img {
    width: 2.5rem;
    height: 2.5rem;
    margin: 0;
    border-radius: 0;
}

@media (width >= 500px) {
    .card-link-icon {
        bottom: 2rem;
        right: 2rem;
    }
}

@media (width >= 600px) {
    .card-header {
        gap:.94rem;
    }

    .card-header > h5,
    .card-header > h5 > strong {
        font-size: var(--heading-font-l);
    }

    .four-cards .card {
        padding: 4.87rem 4.2rem;
    }

    .three-cards .card {
        padding: 3.13rem 3.16rem;
    }

    .icon-cardarrow > img,
    .card-header .icon,
    .card-header .icon img {
        width: 4rem;
        height: 4rem;
    }
}

@media (width >= 768px) {
    .four-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 4rem 1.5rem;
    }

    .four-cards .card {
        padding: 2.71rem;
    }

    .three-cards {
        gap : 1.32rem
    }

    .three-cards .card {
        padding: 3.75rem 4.07rem;
    }

    .three-cards .card-header {
        gap: 1.25rem;
    }

    .four-cards .card-header > h5,
     .four-cards .card-header > h5 > strong {
        font-size: var(--card-font-m);
    }

    .icon-cardarrow > img,
    .card-header .icon,
    .card-header .icon img {
        width: 5.34rem;
        height: 5.35rem;
    }

    .four-cards .card .icon-cardarrow > img {
        width: 3.5rem;
        height: 3.5rem;
    }
}

@media (width >= 992px) {
    .three-cards {
        grid-template-columns: repeat(3, 1fr);
    }

    .four-cards {
        grid-template-columns: repeat(4, 1fr);
    }

    .three-cards .card {
        gap: 0.5rem;
        padding: 1.69rem 1.67rem;
    }

    .icon-cardarrow > img,
    .three-cards .card-header .icon,
    .three-cards .card-header .icon img,
    .four-cards .card .icon-cardarrow > img {
        width: 2.19rem;
        height: 2.19rem;
    }

    .four-cards .card {
        padding: 1.57rem 1.63rem;
    }

    .card-header > h5, .card-header > h5 > strong {
        font-size: var(--card-font-m);
    }

    .three-cards .card-header {
        gap: 0.5rem;
    }
}

@media (width >= 1280px) {
    .three-cards .card {
        gap: 0.54rem;
        padding: 1.94rem 2.43rem;
    }

    .three-cards .card-header {
        gap: .625rem;
    }

    .icon-cardarrow > img,
    .three-cards .card-header .icon,
    .three-cards .card-header .icon img 
    .four-cards .card .icon-cardarrow > img {
        width: 2.8rem;
        height: 2.8rem;
    }

    .four-cards .card {
        padding: 1.97rem 2.03rem;
        max-width: 100%;
        align-self: stretch;
        justify-content: space-between;
    }
}