@import "variables";
@import "mixins";

section.component-counter {
  .counter-wrap {
    display: grid;
    gap: 4rem;
    grid-template-columns: repeat(3, 1fr);
    &.columns-1 {
      grid-template-columns: repeat(2, 1fr);
    }
    &.columns-2 {
      grid-template-columns: repeat(2, 1fr);
    }
    &.columns-3 {
      grid-template-columns: repeat(3, 1fr);
    }
    &.columns-4 {
      grid-template-columns: repeat(4, 1fr);
    }
    @include bp("md") {
      grid-template-columns: repeat(2, 1fr) !important;
    }
    .counter {
      .headline-wrap {
        border-bottom: 1px solid $black;
        margin-bottom: $space-xs;
      }
      .number-wrap {
        span {
          display: inline-block;
          font-size: $fs-h2;
          line-height: 100%;
          font-weight: bold;
          @include bp("md") {
            font-size: $fs-h3;
          }
        }
      }
    }
  }
}
