.column {
    position: relative;
    margin-bottom: var(--spacing-4);
    padding: 0 var(--column-padding);

    &__inner {
      height: 100%;
    }

    &__two,
    &__three,
    &__four,
    &__five,
    &__six {
      position: relative;
      width: calc(100% + (var(--column-padding) * 2));
      height: 100%;
      margin-left: calc(var(--spacing-2) * -1);
      margin-left: calc(var(--column-padding) * -1);
      align-items: stretch;
      flex-flow: row wrap;
      display: flex;
      // container-type: inline-size;
    }
    &--gap-medium {
      width: calc(100% + (var(--column-gap-medium) * 2));
      margin-left: calc(var(--spacing-2) * -1);
      margin-left: calc(var(--column-gap-medium) * -1);

      .column {
        padding: 0 var(--column-gap-medium);
      }
    }
    &--gap-small {
      width: calc(100% + (var(--column-gap-small) * 2));
      margin-left: calc(var(--spacing-2) * -1);
      margin-left: calc(var(--column-gap-small) * -1);

      .column {
        padding: 0 var(--column-gap-small);
      }
    }
    &--gap-none {
      width: calc(100% + (var(--column-gap-none) * 2));
      margin-left: calc(var(--spacing-2) * -1);
      margin-left: calc(var(--column-gap-none) * -1);

      .column {
        padding: 0 var(--column-gap-none);
      }
    }

    &__two {
      &:not(.section__overflow) {
        & + .column__two {
          margin-top: var(--spacing-4);
        }
        .column {
          width: 50%;
          margin-bottom: 0;
  
          &:nth-child(n+3) {
            margin-top: var(--spacing-4);
          }        
        }
        &.column--row-gap-medium {
          .column {
            &:nth-child(n+3) {
              margin-top: var(--column-row-gap-medium);
            }
          }
        }
        &.column--row-gap-small {
          .column {
            &:nth-child(n+3) {
              margin-top: var(--column-row-gap-small);
            }
          }
        }
        &.column--row-gap-none {
          .column {
            &:nth-child(n+3) {
              margin-top: var(--column-row-gap-none);
            }
          }
        }
      } 
    }

    &__three {
      &:not(.section__overflow) {
        .column {
          width: 33.33%;
          margin-bottom: 0;
    
          &:nth-child(n+4) {
            margin-top: var(--spacing-4);
          }
        }
        &.column--row-gap-medium {
          .column {
            &:nth-child(n+4) {
              margin-top: var(--column-row-gap-medium);
            }
          }
        }
        &.column--row-gap-small {
          .column {
            &:nth-child(n+4) {
              margin-top: var(--column-row-gap-small);
            }
          }
        }
        &.column--row-gap-none {
          .column {
            &:nth-child(n+4) {
              margin-top: var(--column-row-gap-none);
            }
          }
        }
      }
    }

    &__four {
      &:not(.section__overflow) {
        .column {
          width: 25%;
          margin-bottom: 0;
    
          &:nth-child(n+5) {
            margin-top: var(--spacing-4);
          }
        }
        &.column--row-gap-medium {
          .column {
            &:nth-child(n+5) {
              margin-top: var(--column-row-gap-medium);
            }
          }
        }
        &.column--row-gap-small {
          .column {
            &:nth-child(n+5) {
              margin-top: var(--column-row-gap-small);
            }
          }
        }
        &.column--row-gap-none {
          .column {
            &:nth-child(n+5) {
              margin-top: var(--column-row-gap-none);
            }
          }
        }
      }
    }

    &__five {
      &:not(.section__overflow) {
        .column {
          width: 20%;
          margin-bottom: 0;
    
          &:nth-child(n+6) {
            margin-top: var(--spacing-4);
          }
        }
        &.column--row-gap-medium {
          .column {
            &:nth-child(n+6) {
              margin-top: var(--column-row-gap-medium);
            }
          }
        }
        &.column--row-gap-small {
          .column {
            &:nth-child(n+6) {
              margin-top: var(--column-row-gap-small);
            }
          }
        }
        &.column--row-gap-none {
          .column {
            &:nth-child(n+6) {
              margin-top: var(--column-row-gap-none);
            }
          }
        }
      }
    }

    &__six {
      &:not(.section__overflow) {
        .column {
          width: 16.6%;
          margin-bottom: 0;
    
          &:nth-child(n+7) {
            margin-top: var(--spacing-4);
          }
        }
        &.column--row-gap-medium {
          .column {
            &:nth-child(n+7) {
              margin-top: var(--column-row-gap-medium);
            }
          }
        }
        &.column--row-gap-small {
          .column {
            &:nth-child(n+7) {
              margin-top: var(--column-row-gap-small);
            }
          }
        }
        &.column--row-gap-none {
          .column {
            &:nth-child(n+7) {
              margin-top: var(--column-row-gap-none);
            }
          }
        }
      }
    }

    $counts: (
      1,
      2,
      3,
      4,
      5,
      6,
      7,
      8,
      9,
      10,
      11,
      12
    );
    @each $count in $counts {
      &-count--#{$count} {
        column-count: $count;
      }
    }
    

    &--d-b {
        display: block;
    }
    &--as-b {
        align-self: baseline;
    }
    &--as-c {
        align-self: center;
    }
    &--as-fs {
        align-self: flex-start;
    }
    &--as-fe {
        align-self: flex-end;
    }
    &--as-s {
        align-self: stretch;
    }
    &--merge-a {
        padding: 0;
    }
    &--merge-r {
        padding-right: 0;
    }
    &--merge-l {
        padding-left: 0;
    }
    &--nowrap {
        flex-flow: row nowrap;
    }
    &--mb-r {
        margin-bottom: 0;
    }
    &--bd-t {
        border-top: var(--border-width-1) solid var(--border-color);
    }
    &--bd-r {
       border-right: var(--border-width-1) solid var(--border-color);
    }
    &--bd-b {
        border-bottom: var(--border-width-1) solid var(--border-color);
    }
    &--bd-l {
        border-left: var(--border-width-1) solid var(--border-color);
    }   
}

@include mq-768 {
  .column {
    &__four {
      &:not(.section__overflow) {
        .column {
          width: 50%;
    
          &:nth-child(n+3) {
            margin-top: var(--spacing-4);
          }
        }
        &.column--row-gap-medium {
          .column {
            &:nth-child(n+3) {
              margin-top: var(--column-row-gap-medium);
            }
          }
        }
        &.column--row-gap-small {
          .column {
            &:nth-child(n+3) {
              margin-top: var(--column-row-gap-small);
            }
          }
        }
        &.column--row-gap-none {
          .column {
            &:nth-child(n+3) {
              margin-top: var(--column-row-gap-none);
            }
          }
        }
      }
    }
    &__six {
      &:not(.section__overflow) {
        .column {
          width: 33.33%;
    
          &:nth-child(n+4) {
            margin-top: var(--spacing-4);
          }
        }
        &.column--row-gap-medium {
          .column {
            &:nth-child(n+4) {
              margin-top: var(--column-row-gap-medium);
            }
          }
        }
        &.column--row-gap-small {
          .column {
            &:nth-child(n+4) {
              margin-top: var(--column-row-gap-small);
            }
          }
        }
        &.column--row-gap-none {
          .column {
            &:nth-child(n+4) {
              margin-top: var(--column-row-gap-none);
            }
          }
        }
      }
    }
  }
}

@include mq-480 {
  .column__wrapper--1:not(.section__overflow):not(.column--half),
  div[class*='column__']:not(.section__overflow):not(.column--half) {
    .column {
      width: 100%;

      &--bd-r {
        border: var(--border-none);
      }
    }
  }
  .column__wrapper--2:not(.section__overflow),
  .column__five:not(.section__overflow):not(.column__wrapper--1),
  .column__six:not(.section__overflow) {
    padding: 0 var(--spacing-3);

    .column {
      width: 50%;
      padding: 0 var(--spacing-1);
      margin-bottom: var(--spacing-2);
    }
  }



  .column {
    &__three .column, &__four .column {
      &:nth-child(n+2) {
        margin-top: var(--spacing-4);
      }
    }
    &__six .column {
      width: 33.33%;
    }
  }



  .column__two:not(.section__overflow) .column:nth-child(n+2) {
    margin-top: var(--spacing-4);
  }



  .column__four.section__overflow .column:nth-child(n+2) {
    margin-top: 0;
  }
  // .column___four {
  //     &:not(.section__overflow) {
  //       .column {    
  //         &:nth-child(n+2) {
  //           margin-top: var(--spacing-4);
  //         }
  //       }
  //       &.column--row-gap-medium {
  //         .column {
  //           &:nth-child(n+2) {
  //             margin-top: var(--column-row-gap-medium);
  //           }
  //         }
  //       }
  //       &.column--row-gap-small {
  //         .column {
  //           &:nth-child(n+2) {
  //             margin-top: var(--column-row-gap-small);
  //           }
  //         }
  //       }
  //       &.column--row-gap-none {
  //         .column {
  //           &:nth-child(n+) {
  //             margin-top: var(--column-row-gap-none);
  //           }
  //         }
  //       }
  //     }
  //   }




  .column--full:not(.section__overflow),
  .column__five--full:not(.section__overflow):not(.column__wrapper--1),
  .column__six--full:not(.section__overflow) {
    .column {
      width: 100%;
      padding: 0 var(--spacing-1);
      margin-bottom: var(--spacing-2);
    }
  }
  .column--half:not(.section__overflow) {
    .column {
      width: 50%;
      padding: 0 var(--spacing-1);
      margin-bottom: var(--spacing-2);
    }
  }
  
}