web/apps/scandic-web/components/Blocks/Essentials/essentials.module.css

.essentialsSection {
  display: grid;
  gap: var(--Space-x5);
}

.header {
  display: grid;
  gap: var(--Space-x2);
}

.heading {
  color: var(--Text-Heading);
}

.list {
  list-style: none;
  display: grid;
  grid-auto-rows: auto;
  row-gap: var(--Space-x15);
}

.listItem {
  position: relative;
  display: grid;
  gap: 19px; /* Special from Figma */
  color: var(--Text-Secondary);
  justify-items: center;
  padding: 0 var(--Space-x1);

  &::after {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    content: "";
    width: 1px;
    background-color: var(--Border-Default);
    height: 82px; /* Special from Figma */
  }
}

.text {
  display: grid;
  gap: var(--Space-x1);
  text-align: center;
}

@media screen and (max-width: 949px) {
  .list {
    grid-template-columns: repeat(2, 1fr);
    row-gap: var(--Space-x2);

    .listItem:nth-child(2n)::after {
      display: none;
    }
  }
}

@media screen and (min-width: 950px) and (max-width: 1366px) {
  .list {
    grid-template-columns: repeat(4, 1fr);
    row-gap: var(--Space-x3);

    &:not(.count3, .count5, .count6) .listItem:nth-child(4n)::after {
      display: none;
    }

    &.count3,
    &.count5,
    &.count6 {
      grid-template-columns: repeat(3, 1fr);

      .listItem:nth-child(3n)::after {
        display: none;
      }
    }
  }
}

@media screen and (min-width: 1367px) {
  .list {
    grid-template-columns: repeat(4, 1fr);

    &:not(.count3, .count5, .count6) .listItem:nth-child(4n)::after {
      display: none;
    }

    &.count3 {
      grid-template-columns: repeat(3, 1fr);

      .listItem:nth-child(3n)::after {
        display: none;
      }
    }
    &.count5 {
      grid-template-columns: repeat(5, 1fr);

      .listItem:nth-child(5n)::after {
        display: none;
      }
    }
    &.count6 {
      grid-template-columns: repeat(6, 1fr);

      .listItem:nth-child(6n)::after {
        display: none;
      }
    }
  }
}