@mixin rowsOfFour() {
  .component-headers {
    display: flex;
    flex-wrap: wrap;

    &.group-of-1 {
      .header {
        width: 100%;
      }
    }

    &.group-of-2 {
      .header {
        width: calc(50% - 5px);

        &:not(:nth-child(2n)) {
          margin-right: calculateRem(10);
        }
      }
    }

    &.group-of-3 {
      .header {
        width: calc(33.333333% - 6.666667px);

        &:not(:nth-child(3n)) {
          margin-right: calculateRem(10);
        }
      }
    }

    &:not(.group-of-1):not(.group-of-2):not(.group-of-3) {
      .header {
        width: calc(25% - 7.5px);

        &:not(:nth-child(4n)) {
          margin-right: calculateRem(10);
        }
      }
    }
  }
}

@mixin rowsOfTwo() {
  .component-headers {
    display: flex;
    flex-wrap: wrap;

    &.group-of-1 {
      .header {
        width: 100%;
      }
    }

    &:not(.group-of-1) {
      .header {
        width: calc(50% - 5px);

        &:not(:nth-child(2n)) {
          margin-right: calculateRem(10);
        }
      }
    }
  }
}

@mixin alwaysThirds() {
  .component-headers {
    display: flex;
    flex-wrap: wrap;

    .header {
      width: calc(33.333333% - 6.666667px);

      &:not(:nth-child(3n)) {
        margin-right: calculateRem(10);
      }
    }
  }
}