.femag-shell{
  width:min(calc(100% - 2rem),var(--femag-shell));
  margin-inline:auto;
}
.femag-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--femag-space-4);
}
.femag-section{
  position:relative;
  padding-block:clamp(4rem,8vw,9rem);
}
.femag-section--blue{background:var(--femag-blue-900);color:var(--femag-white)}
.femag-section--red{background:var(--femag-red-700);color:var(--femag-white)}
.femag-section--cream{background:var(--femag-cream)}
.femag-section--tech{background:var(--femag-gray-200);color:var(--femag-ink)}
.femag-section--white{background:var(--femag-white);color:var(--femag-ink)}

.femag-component{container-type:inline-size}

@media(min-width:48rem){
  .femag-shell{width:min(calc(100% - 4rem),var(--femag-shell))}
  .femag-grid{grid-template-columns:repeat(8,minmax(0,1fr));gap:var(--femag-space-5)}
}
@media(min-width:70rem){
  .femag-grid{grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--femag-space-6)}
}

/* Utility column spans for BeBuilder custom classes */
.femag-col-all{grid-column:1/-1}
@media(min-width:70rem){
  .femag-col-1-5{grid-column:1/6}
  .femag-col-1-7{grid-column:1/8}
  .femag-col-1-9{grid-column:1/10}
  .femag-col-6-12{grid-column:6/13}
  .femag-col-8-12{grid-column:8/13}
  .femag-col-10-12{grid-column:10/13}
}