/* =================================================
SOFTSPLIT — Layout Engine
Two column layout helper for articles
================================================= */

.softsplit{
display:grid;
gap:32px;
align-items:start;
width:100%;
max-width:100%;
box-sizing:border-box;
}

/* allow clean markup without column classes */

.softsplit > *{
min-width:0;
}

/* =================================================
RATIO DEFINITIONS
================================================= */

/* Small / Large */

.softsplit.ratio-20-80{
grid-template-columns:minmax(0,20fr) minmax(0,80fr);
}

.softsplit.ratio-25-75{
grid-template-columns:minmax(0,25fr) minmax(0,75fr);
}

.softsplit.ratio-30-70{
grid-template-columns:minmax(0,30fr) minmax(0,70fr);
}

.softsplit.ratio-33-67{
grid-template-columns:minmax(0,33fr) minmax(0,67fr);
}

/* Balanced */

.softsplit.ratio-40-60{
grid-template-columns:minmax(0,40fr) minmax(0,60fr);
}

.softsplit.ratio-50-50{
grid-template-columns:minmax(0,50fr) minmax(0,50fr);
}

/* Large / Small (reciprocal) */

.softsplit.ratio-60-40{
grid-template-columns:minmax(0,60fr) minmax(0,40fr);
}

.softsplit.ratio-67-33{
grid-template-columns:minmax(0,67fr) minmax(0,33fr);
}

.softsplit.ratio-70-30{
grid-template-columns:minmax(0,70fr) minmax(0,30fr);
}

.softsplit.ratio-75-25{
grid-template-columns:minmax(0,75fr) minmax(0,25fr);
}

.softsplit.ratio-80-20{
grid-template-columns:minmax(0,80fr) minmax(0,20fr);
}


/* =================================================
PHOTO CARD ALIGNMENT
================================================= */

.softsplit .softfoto-single{
margin-top:0;
}


/* =================================================
MOBILE
================================================= */

@media (max-width:900px){

.softsplit{
grid-template-columns:1fr !important;
gap:20px;
}

}

/* =================================================
SOFTSPLIT — Layout Engine
================================================= */

.softsplit{
display:flex;
gap:32px;
align-items:flex-start;
}

/* column wrapper */
.softsplit > *{
flex:1 1 0;
}

/* ratios */

.softsplit.ratio-25-75 > *:first-child{flex:0 0 25%;}
.softsplit.ratio-25-75 > *:last-child{flex:0 0 75%;}

.softsplit.ratio-75-25 > *:first-child{flex:0 0 75%;}
.softsplit.ratio-75-25 > *:last-child{flex:0 0 25%;}

.softsplit.ratio-40-60 > *:first-child{flex:0 0 40%;}
.softsplit.ratio-40-60 > *:last-child{flex:0 0 60%;}

.softsplit.ratio-60-40 > *:first-child{flex:0 0 60%;}
.softsplit.ratio-60-40 > *:last-child{flex:0 0 40%;}



/* mobile stack */

@media (max-width:900px){

.softsplit{
flex-direction:column;
}

.softsplit > *{
flex:0 0 auto;
width:100%;
}

}

/* SoftSplit images must obey column width */

.softsplit .softfoto-card {
    max-width:100%;
}

.softsplit .softfoto-img {
    width:100%;
    height:auto;
}