bb-row-framework.css

:root {
  /* -- EDIT THE FOLLOWING VARIABLES TO ADUST GLOBAL ROW PADDING -- */
  --bb-x-large: 5%;
  --bb-large: 5%;
  --bb-medium: 3%;
  --bb-small: 20px;
}

/* x-large row padding */
@media(min-width:768px) {
  .top .fl-row-content {
    padding-top: var(--bb-x-large);
  }
  .bottom .fl-row-content {
    padding-bottom: var(--bb-x-large);
  }
  .fl-row-content {
    padding-left: var(--bb-small);
    padding-right: var(--bb-small);
  }
}

/* large row padding */
@media(min-width:768px) AND (max-width: 1200px) {
  .top .fl-row-content {
    padding-top: var(--bb-large);
  }
  .bottom .fl-row-content {
    padding-bottom: var(--bb-large);
  }
}

/* medium row padding */
@media(min-width:768px) AND (max-width: 992px) {
  .top .fl-row-content {
    padding-top: var(--bb-medium);
  }
  .bottom .fl-row-content {
    padding-bottom: var(--bb-medium);
  }
}

/* small row padding */
@media(max-width:768px) {
  body .fl-row[data-node] .fl-row-content-wrap {
    padding-left: var(--bb-small);
    padding-right: var(--bb-small);
  }
  .fl-row[data-node].top .fl-row-content-wrap {
    padding-top: var(--bb-small);
    padding-bottom: 0;
  }
  .fl-row[data-node].bottom .fl-row-content-wrap {
    padding-top: 0;
    padding-bottom: var(--bb-small);  
  }
  .fl-row[data-node].bottom.top .fl-row-content-wrap {
    padding-top: var(--bb-small);
    padding-bottom: var(--bb-small);  
  }
}

/* Column classes */
@media(min-width:1401px) {
  .narrow .fl-col-content {
    max-width: 992px;
    margin-left: auto;
    margin-right: auto;
  }   
}
@media(min-width:768px) {
  .hero-left .fl-col-content {
    max-width: calc(1200px/2.25);
    margin-right: auto;
  }
  .hero-right .fl-col-content {
    max-width: calc(1200px/2.25) !important;
    margin-left: auto;
  }
}