/* ----------------- MAIN SITE WRAPPER ----------------- */


.wrapper{
    max-width: 1280px; /* 80rem */
    margin-inline: auto;
    padding-inline: 1rem; /* 16px */
    /* border: 1px solid red; */
}
/* 1rem (16px) padding each side means usable content width 1248px (78rem) */



/* ----------------- THIRDS LAYOUTS ----------------- */

/* 
If using 2rem gutters...
half and half 
78rem - 2rem = 76 
76 / 2 = 38rem columns

or thirds
78-4 = 74
74/3 = 24.66rem 

or thirds but two columns

78rem - 2rem = 76 
76/3*2 = 50.66
76/3 = 25.33
*/


.csprp-layout-row{
    display: grid;
    gap: 2rem;
}

.csprp-layout-row-50-50{
    grid-template-columns: 1fr 1fr;
}

.csprp-layout-row-33-66{
    grid-template-columns: 1fr 2fr;
}

.csprp-layout-row-66-33{
    grid-template-columns: 2fr 1fr;
}

.csprp-layout-row-33-33-33{
    grid-template-columns: repeat(3, 1fr);
}



@media (max-width: 640px) {
    .csprp-layout-row-33-66,
    .csprp-layout-row-66-33,
    .csprp-layout-row-33-33-33{
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .csprp-layout-row-50-50{
        grid-template-columns: 1fr;
    }    
}

.csprp-layout-col{
    /* border: 1px solid greenyellow; */
}


/* remove margin top from headings when starting a new column */
.csprp-layout-col [class*="csprp-heading"]{
    margin-top: 0;
}


.csprp-items-space-between{
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}






.csprp-layout--sidebar-sticky {
    position: sticky;
    top: 3rem;
}