.grid {
  #common.element-base();

  &--sidar {
    @media (min-width: @common-breakpoint-lg) {
      --common-elementItem-width: 75%; // 6/8
    }

    @media (min-width: @common-breakpoint-xl) {
      --common-elementItem-width: 66.66%; // 8/12
    }
  }

  &--navahopi {
    @media (min-width: @common-breakpoint-lg) {
      --common-elementItem-width: 75%; // 6/8
    }

    @media (min-width: @common-breakpoint-xl) {
      --common-elementItem-width: 83.33%; // 10/12
    }
  }

  &--jordan {
    @media (min-width: @common-breakpoint-lg) {
      --common-elementItem-width: 50%; // 4/8
    }

    @media (min-width: @common-breakpoint-xl) {
      --common-elementItem-width: 50%; // 6/12
    }
  }

  &--meskit {
    @media (min-width: @common-breakpoint-md) {
      --common-elementItem-width: 50%; // 4/8
    }

    @media (min-width: @common-breakpoint-xl) {
      --common-elementItem-width: 33.33%; // 4/12
    }
  }

  &--amara {
    @media (min-width: @common-breakpoint-sm) {
      --common-elementItem-width: 50%; // 2/4
    }

    @media (min-width: @common-breakpoint-md) {
      --common-elementItem-width: 50%; // 3/6
    }

    @media (min-width: @common-breakpoint-lg) {
      --common-elementItem-width: 33.33%; // ⅓/8
    }

    @media (min-width: @common-breakpoint-xl) {
      --common-elementItem-width: 25%; // 3/12
    }
  }
}

.grid__item {
  #common.element-item();
}