@use "variables";

/* =Blocks
-----------------------------------------------------------------------------*/
.blocks-2,
.blocks-3,
.blocks-4,
.blocks-5,
.blocks-6 {
  padding-left: 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: variables.$base-line variables.$grid-gutter-width;

  & > li {
    height: auto;
    & ul {
      list-style-type: disc;
    }
    & ul ul {
      list-style-type: circle;
    }
    & li {
      margin: 0;
    }
  }
}

.blocks-2 > li { flex: 0 0 calc(50% - variables.$grid-gutter-width * 0.5); }
.blocks-3 > li { flex: 0 0 calc(33.333% - variables.$grid-gutter-width * 2 / 3); }
.blocks-4 > li { flex: 0 0 calc(25% - variables.$grid-gutter-width * 0.75); }
.blocks-5 > li { flex: 0 0 calc(20% - variables.$grid-gutter-width * 0.8); }
.blocks-6 > li { flex: 0 0 calc(16.666% - variables.$grid-gutter-width * 5 / 6); }

.block-first {
  // Kept for backward compatibility (no-op with flexbox)
}