@use "sass:map";
/*#############################################################################
# LAYOUT
#############################################################################*/


// Grid Structure
$gridColumns: 12;
$breakPoints: (
  medium: (
    short-hand: "md",
    resolution: $breakpoint-medium
  ),
  xmedium: (
    short-hand: "xm",
    resolution: $breakpoint-xmedium
  ),
  large: (
    short-hand: "lg",
    resolution: $breakpoint-large
  ),
  xlarge: (
    short-hand: "xl",
    resolution: $breakpoint-xlarge
  )
);

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);

  @include responsive($breakpoint-medium) {
    grid-column-gap: 40px;
  }

  .col {
    @for $i from 1 through $gridColumns {
      &.sm#{$i}{
        grid-column: span $i;
      }
    }

    @each $breakPointName, $breakPointProp in $breakPoints {
      @include responsive(map.get($breakPointProp, "resolution")){
        @for $i from 1 through $gridColumns {
          &.#{map.get($breakPointProp, "short-hand")}#{$i}{
            grid-column: span $i;
          }
        }
      }
    }
  }
}

// Structure
.section-wrapper {
  padding: 80px 0;

  &:last-child {
    padding: 80px 0 120px;
  }

  // Sides Push
  &.sides-push {
    background-color: #f7f8fb;
    margin: 40px 20px;
    @include border-radius(10px);

    @include responsive($breakpoint-large) {
      margin: 40px;
    }
  }

  // Negative State
  &.negative {
    background-color: $color-primary-darker;
    color: white;
  }
}

// Sides Push
.sides-push {
  background-color: #f7f8fb;
  margin: 40px 20px;
  @include border-radius(10px);

  @include responsive($breakpoint-large) {
    margin: 40px;
  }
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 10px;

  @include responsive($breakpoint-medium) {
    padding: 0 20px;
  }

  // Centered content
  &.centered {
    text-align: center;
  }

  .container {
    padding: 0;
  }
}

.content-box {
  margin-bottom: 100px;

  &:last-of-type {
    margin-bottom: 0;
  }

  @include responsive($breakpoint-medium) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 10%;
    justify-items: center;
    justify-content: center;
    align-items: center;
    padding: 20px;

    &.reverse {
      .content-box-col {
        &:nth-child(1) {
          grid-column: 2;
          grid-row: 1;
        }

        &:nth-child(2) {
          grid-column: 1;
          grid-row: 1;
        }
      }
    }
  }

  @include responsive($breakpoint-xmedium) {
    grid-column-gap: 20%;
  }

  @include responsive($breakpoint-xxlarge) {
    margin-bottom: 200px;
  }

}