.block-padding-size-small {
  .container {
    padding: 6rem 0;
  }
}

.block-padding-size-medium {
  .container {
    padding: 8rem 0;
  }
}

.block-padding-size-large {
  .container {
    padding: 10rem 0;
  }
}

.block-padding-size-xlarge {
  .container {
    padding: 12rem 0;
  }
}

.block-options-padding-remove-top {
  .container {
    padding-top: 0;
  }
}
.block-options-padding-remove-bottom {
  .container {
    padding-bottom: 0;
  }
}

.block-content-pull-up {
  margin-top: -20rem;
}

.block-container {
  &-x-small,
  &-small,
  &-medium {
    .container {
      --num-cols: 1;

      display: grid;
      grid-template-columns: repeat(var(--num-cols), minmax(0, 1fr));
      gap: 0 1.6rem;
      @include media-min($medium) {
        gap: 0 3.2rem;
        --num-cols: 12;
      }
    }
  }

  &-x-small {
    .container > div {
      @include media-min($medium) {
        grid-column: span 8 / span 8;
        grid-column-start: 3;
      }
      @include media-min($large) {
        grid-column: span 6 / span 6;
        grid-column-start: 4;
      }
    }
  }
  &-small {
    .container > div {
      @include media-min($medium) {
        grid-column: span 10 / span 10;
        grid-column-start: 2;
      }
      @include media-min($large) {
        grid-column: span 8 / span 8;
        grid-column-start: 3;
      }
    }
  }
  &-medium {
    .container > div {
      @include media-min($medium) {
        grid-column: span 10 / span 10;
        grid-column-start: 2;
      }
    }
  }
}