.page {
  padding: 2rem;
  max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

.sbads-grid-container {
  display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-right: -1rem;
}


.sbads-grid {
  padding: 1rem;
}

.sbads-grid .sbads-grid {
  padding: 0;
  background: none;
  box-shadow: none;
}


  .sbads-grid.col2 {
    width: calc((100% / 2) - 3rem);
      margin-right: 1rem;
      margin-bottom: 1rem;
  }
    
    .sbads-grid .sbads-grid.col2 {
	width: calc((100% / 2) - 1rem);
}
    
    .sbads-grid.col3, .sbads-grid.col4 {
    width: calc(100% - 3rem);
        margin-bottom: 1rem;
}


@supports (display:grid) {

  .sbads-grid {
    padding: 0;
  }
    
    .sbads-grid-container {
  -webkit-column-gap: 1rem;
    column-gap: 2rem;
    -webkit-row-gap: 2rem;
    row-gap: 2em;
    display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 2rem;
        gap: 2rem;
    margin-right: auto;
}
    
    .sbads-grid-container .sbads-grid-container {
  margin-right: unset;
}
.sbads-grid.col2 {
    grid-column: span 1;
    width: unset;
    margin-right: unset;
    margin-bottom: unset;
  }

.sbads-grid .sbads-grid.col2 {
    grid-column: span 1;
        width: unset;

}

.sbads-grid.col3, .sbads-grid.col4 {
    grid-column: span 2;
    width: unset;
    margin-bottom: unset;

}



}

/* Media queries to prevent breaking at smaller widths */




@media (max-width: 800px) {
    
    .sbads-grid-container {
  grid-template-columns: 1fr;
    }

 /*   .sbads-grid.col2 {
    width: calc(100% - 2em);
  }
    */
    .sbads-grid .sbads-grid.col2 {
	width: 1fr;
}
    
    .sbads-grid.col3, .sbads-grid.col4 {
    grid-column: span 1;
}
}