@import '01-variables/04-variables-grid-layout.scss';
@import '02-ocl/02-ocl-grid-layout.scss';
@import '01-variables/01-variables-breakpoints.scss';

.grid {
  width: 100%;

  .grid-cell {
    display: inline-block;
    height: auto;
    width: 100%;
  }

  &[data-columns='flex'] {
    .grid-cell {
      width: 16.6666666666%;
      @include grid-cell-xl-screen {
        width: 20%;
      }
      @include grid-cell-l-screen {
        width: 25%;
      }
      @include grid-cell-m-screen {
        width: 33.3333333333%;
      }
      @include up-to-tablet-portrait {
        width: 50%;
      }
    }
  }
  &[data-columns='4'] {
    .grid-cell {
      width: 25%;
    }
  }
  &[data-columns='3'] {
    .grid-cell {
      width: 33.3333333333%;
    }
  }
  &[data-columns='2'] {
    .grid-cell {
      width: 50%;
    }
  }
}