.custom-cards-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.4rem;
    overflow: hidden;

    & .custom-card__container,
    & .custom-media-card__container {
        display: contents;
        min-width: 0;
    }

    & .custom-card,
    & .custom-media-card {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 3;
        container-type: normal; /* Remove layout containment so subgrid can inherit parent row tracks */
        gap: 2rem;
        min-width: 0;
        word-break: break-word;
        overflow-wrap: break-word;
    }

    &.grid-row-span-3 {
        & .custom-card,
        & .custom-media-card {
            grid-row: span 3;
        }
    }

    &.grid-row-span-4 {
        & .custom-card,
        & .custom-media-card {
            grid-row: span 4;
        }
    }

    & .custom-card__button,
    & .custom-media-card__button {
        width: fit-content;
        height: auto;
        min-height: 40px;
        white-space: normal;
        text-wrap: wrap;
        overflow-wrap: break-word;
        word-break: break-word;
    }


}



/* 2 Columns layout (Default fallback for backward compatibility) */
.custom-cards-group.has-2-columns {
    & .custom-card__container:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        
        & .custom-card {
            max-width: 100%;
        }
    }
}

/* 3 Columns layout */
.custom-cards-group.has-3-columns {
    grid-template-columns: repeat(3, minmax(0, 1fr));

    & .custom-card__container:last-child:nth-child(3n+1) {
        grid-column: 1 / -1;
        
        & .custom-card {
            max-width: 100%;
        }
    }
}