/* Base grid container */
.ccb-grid {
	width:100%;
	overflow:hidden;
    display: grid;
    gap: 30px; /* Adjust gap as needed */
    margin-top: 0; /* Add margin-top */
    margin-bottom: 10px; /* Add margin-bottom */
    padding: 6px; /* Add padding */
}

/* 50-50 columns */
.ccb-grid-50-50 {
    grid-template-columns: 1fr 1fr;
}

.ccb-grid-50-50 > div {
    /* Ensure child divs fill their grid area */
    width: 100%;
}

/* Stack to single column layout earlier */
@media (max-width: 1024px) { /* Adjust the breakpoint as needed */
    .ccb-grid-50-50 {
        grid-template-columns: 1fr;
    }
}

/* 60-40 columns */
.ccb-grid-60-40 {
    grid-template-columns: 3fr 2fr;
}

.ccb-grid-60-40 > div {
    /* Ensure child divs fill their grid area */
    width: 100%;
}

/* Stack to single column layout earlier */
@media (max-width: 1024px) { /* Adjust the breakpoint as needed */
    .ccb-grid-60-40 {
        grid-template-columns: 1fr;
    }
}

/* 70-30 columns */
.ccb-grid-70-30 {
    grid-template-columns: 7fr 3fr;
}

.ccb-grid-70-30 > div {
    /* Ensure child divs fill their grid area */
    width: 100%;
}

/* Stack to single column layout earlier */
@media (max-width: 1024px) { /* Adjust the breakpoint as needed */
    .ccb-grid-70-30 {
        grid-template-columns: 1fr;
    }
}

/* 40-60 columns */
.ccb-grid-40-60 {
    grid-template-columns: 2fr 3fr;
}

.ccb-grid-40-60 > div {
    /* Ensure child divs fill their grid area */
    width: 100%;
}



/* 30-70 columns */
.ccb-grid-30-70 {
    grid-template-columns: 3fr 7fr;
}

.ccb-grid-30-70 > div {
    /* Ensure child divs fill their grid area */
    width: 98%;
}

/* Stack to single column layout at max-width: 1024px */
@media (max-width: 480px) {
    .ccb-grid-50-50,
    .ccb-grid-60-40,
    .ccb-grid-70-30,
    .ccb-grid-40-60,
    .ccb-grid-30-70 {
        grid-template-columns: 1fr;  /* Stack to single column */
    }