/*============================================================================
  Padded grid box
  Adds a 120px bleed to both sides of the grid
==============================================================================*/

$grid-padding: $column + $gutter;

.padded-grid-box {
  padding: $gutter * 1.5 $gutter $gutter;
  margin: 0 (-$gutter);
  background: rgba($color-black, 0.7);

  @include shopify-breakpoint($desktop-up) {
    padding-left: $grid-padding;
    padding-right: $grid-padding;

    // Need to account for page-width padding (30px)
    margin: 0 (-$grid-padding + $gutter) 0 (-$grid-padding);
  }

  @include shopify-breakpoint($tablet-down) {
    background: none;
  }

  @include shopify-breakpoint($mobile) {
    position: static;
    max-width: 100%;
    margin: 0;
  }
}