/* Molecule: Card A */
.m-card-a {
    display: grid;
    align-items: center;
    background-color: var(--color-white);
    position: relative;
    overflow: hidden;
    margin-bottom: 0;

    & .a-button.a-button--secondary{
        &:hover {
            background-color: var(--color-red-hover);
            color: var(--color-white);
            border-color: var(--color-red-hover);
        }
    }

    @media (width >=768px) {
        min-height: 18.375rem;
        height: 100%;
    }
}

& .m-card-a__text {
    margin-bottom: 0;

    & p:last-of-type {
        margin-bottom: 0;
    }
}

.m-card-a__media {
    height: 100%;
    margin: 0;
    min-height: 200px;

    @media (width >=1024px) {
        aspect-ratio: 43/22;
        max-width: 100%;       
    }
}

.m-card-a__media .a-image-a {
    height: 100%;
}

.m-card-a__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.m-card-a__content {
    padding: 1.875rem 1.1875rem 1.4375rem 1.625rem;

    @media (width >=768px) {
        padding-left: 2.4375rem;
    }
}

.m-card-a__content a {
    margin-top: 0.8125rem;

    @media (width >=768px) {
        margin-top: 1.5rem;
    }
}

.m-card-a.reverse {
    @media (width >=768px) {
        grid-template-columns: 1fr 1.2fr;
    }
}

.m-card-a.reverse .m-card-a__content {
    @media (width >=768px) {
        order: -1;
    }
}

.m-card-a:not(.reverse) {
    @media (width >=768px) {
        grid-template-columns: 1.2fr 1fr;
    }

    & .m-card-a__content {
        padding-right: 4.6875rem;
    }
}

/* Organism: Card A */
.o-cards-a {
    padding-top: 3rem;
    padding-bottom: 2.3125rem;

    @media (width >=1024px) {
        padding-top: 5.125rem;
        padding-bottom: 5.25rem;
    }

    & .o-cards-a__title {
        font-size: clamp(var(--title-lg), 1.25rem + 3vw, var(--title-xl));
    }

    & .a-button {
        --py: 1.5em;

        padding-left: var(--py);
        padding-right: var(--py);
    }
}

.o-cards-a__header {
    margin-bottom: 3rem;
}

.o-cards-a__items {
    display: flex;
    flex-direction: column;
    margin-top: 2.875rem;
    gap: 1.875rem;

    @media (width >=1024px) {
        margin-top: 2.625rem;
    }
}