.section-cards .section-header {
    text-align: center;
}

.cd-card {
    border-radius: var(--radius-sm);
    overflow: hidden;

    &:hover .cd-card-image img {
        transform: scale(1.05);
    }
}

.cd-card-image {
    overflow: hidden;

    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform var(--trans-slow);
    }

    &:empty {
        display: none;
    }
}

.cd-card-content {
    display: flex;
    flex-direction: column;
    gap: calc(var(--item-gap) * .5);
    align-items: flex-start;

    h3 {
        font-size: var(--text-h5);
        margin: 0;
    }

    p {
        font-size: var(--text-sm);
        line-height: 1.6;
        margin: 0;
    }
}

.section-cards.img-top {
    .cd-card {
        display: flex;
        flex-direction: column;
    }

    .cd-card-image {
        aspect-ratio: 4 / 3;
    }

    .cd-card-content {
        padding: var(--item-gap) var(--item-gap) var(--item-gap) 0;
    }
}

.section-cards.img-left .cd-card,
.section-cards.img-right .cd-card {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;

    @media (min-width: 768px) {
        grid-template-columns: 1fr 3fr;
    }
}

.section-cards.img-left .cd-card-image,
.section-cards.img-right .cd-card-image {
    aspect-ratio: 16 / 10;

    @media (min-width: 768px) {
        aspect-ratio: auto;
    }
}

.section-cards.img-left .cd-card-content,
.section-cards.img-right .cd-card-content {
    padding: calc(var(--item-gap) * 1.5);
    justify-content: center;
}

.section-cards.img-right .cd-card {
    @media (min-width: 768px) {
        grid-template-columns: 3fr 1fr;

        .cd-card-image {
            order: 2;
        }

        .cd-card-content {
            order: 1;
        }
    }
}