.fullwidth {
  width: 100%;
  padding-left: var(--grid-gap);
  padding-right: var(--grid-gap);
}

.grid-4 {
  display:               grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  gap:                   var(--grid-gap);
  padding-left: var(--grid-gap);
  padding-right: var(--grid-gap);
}

.grid-4-2 {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   var(--grid-gap);
  padding-left: var(--grid-gap);
  padding-right: var(--grid-gap);
}

.grid-8 {
  display:               grid;
  grid-template-columns: repeat(8, 1fr);
  gap:                   var(--grid-gap);
}

.column-1 { grid-column: 1; }
.column-2 { grid-column: 2; }
.column-3 { grid-column: 3; }
.column-4 { grid-column: 4; }

.center-columns     { grid-column: 2 / 4; }
.left-half-columns  { grid-column: 1 / 3; }
.right-half-columns { grid-column: 3 / 5; }
.full-columns       { grid-column: 1 / -1; }

.right-half-columns {
  display:         flex;
  align-items:     baseline;
  justify-content: space-between;
  gap:             var(--grid-gap);
  width:           100%;
}

.image-grid-bhsad {
  display:               grid;
  grid-template-columns: repeat(8, 1fr);
  gap:                   var(--grid-gap);
}

.image-grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   var(--grid-gap);
}