.custom-media-card__container {
    padding: 1px 4px 0 1px;
}

.custom-media-card {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    background: #FFFFFF;
    border: none;
    border-radius: 12px;
    padding: 2.4rem 2rem;
    max-width: 750px;
    box-sizing: border-box;
    box-shadow: var(--shadow-primary);
    container-type: inline-size;

    &.is-card-primary {
        background: #FFFFFF;
    }

    &.is-card-secondary {
        margin: 0;
        box-shadow: none;
        background: var(--color-primary-very-light);

        & .custom-media-card__button.btn-secondary {
            border-color: var(--color-primary);
            color: var(--color-primary) !important;

            &:hover {
                background-color: var(--color-primary-ultralight);
            }
        }
    }

    & .custom-media-card__header {
        display: flex;
        align-items: start;
    }

    & .custom-media-card__title {
        flex: 1;
        margin: 0;
        color: var(--text-color-black-80);
        font-family: var(--font-primary);
        font-size: 2.0rem;
        font-weight: 600;
        line-height: 1.3;
        letter-spacing: 0.0036rem;
        text-wrap: balance;
    }

    & .custom-media-card__image-container {
        width: 100%;
        overflow: hidden;
        border-radius: 8px; /* Smooth rounded corners matching card styling */
        line-height: 0;
    }

    & .custom-media-card__image {
        display: block;
        width: 100%;
        height: auto;
        object-fit: cover;
    }

    & .custom-media-card__body>.custom-media-card__description {
        margin: 0;

        & p {
            margin: 0;
        }
    }
}

.custom-media-card__footer {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;

    & .custom-media-card__button {
        width: fit-content;
        text-decoration: none;
        font-size: 1.6rem;
        color: #FFFFFF;
    }
}

@container (min-width: 380px) {
    .custom-media-card__footer {
        flex-direction: row;

        & .custom-media-card__button {
            width: fit-content;
        }
    }
}