.custom-card__container {
    padding: 1px 4px 0 1px;
    margin-bottom: 2.4rem;
}

.custom-card {
    margin-bottom: 1rem;
    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;
        background-color: #EDFAF6;
        box-shadow: none;
        background: var(--color-primary-very-light);

        & .custom-card__button.btn-primary {
            color: var(--white-100) !important;
            /* background-color: var(--color-accent); */
            /* border: 1.5px solid transparent; */
            
            /* &:hover {
                background-color: var(--color-primary);
                opacity: 1;
            } */

            &:active {
                background-color: var(--color-primary-dark);
            }
        }
    }

    & .custom-card__header {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    & .custom-card__icon {
        width: 24px;
        height: 24px;
    }

    & .custom-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-card__body>.custom-card__description {
        margin: 0;

        & p {
            margin: 0;
        }
    }
}

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

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

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

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

/* If using Dashicons specifically */
.custom-card__icon.dashicons {
    display: inline-block;
    width: auto;
    height: auto;
    line-height: 1;
}