.paragraph-layout--threecol{
  display: flex;
  flex-direction: column;
  gap: var(--spacing);
}

@media all and (min-width: 768px){
  .paragraph-layout--threecol{
    display: grid;
    /* grid-template-columns: 1fr 1fr; */
    grid-template-columns:  calc(50% - var(--spacing, 1em) / 2) calc(50% - var(--spacing, 1em) / 2);
    grid-template-rows: auto ;
  }
}




@media all and (min-width: 1024px){
  .paragraph-layout--threecol{
    display: grid;
    /* grid-template-columns: 1fr 1fr 1fr; */
    grid-template-columns: calc( (100% / 3) - ( ( var(--spacing, 1em) * 2) / 3 ) )  calc( (100% / 3) - ( ( var(--spacing, 1em) * 2) / 3 ) ) calc( (100% / 3) - ( ( var(--spacing, 1em) * 2) / 3 ) );
    grid-template-rows: auto;
  }

}