.grid {

  &__container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
  }

  &__item {
    width: calc((100% - 20px * 2) / 3);
    min-width: 157px;
    min-height: 112px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .4s ease;
    position: relative;

    &.group {
      width: calc((100% - 20px * 3) / 4);
    }

    @include breakpoint-down('deskS') {
      min-height: 80px;
      margin-bottom: 0;
    }

    @include breakpoint-up('tabM') {
      &:nth-child(3n + 3) {
        margin-right: 0;
      }
    }

    @include breakpoint-down('tabM') {
      &:nth-child(2n + 2) {
        margin-right: 0;
      }
    }

    @include breakpoint-down('mobM') {
      min-width: auto;
      width: calc((100% - 20px) / 2);
    }

    img {
      position: absolute;
      transition: .4s ease;

      &[data-action="off"] {
        opacity: 1;
      }

      &[data-action="on"] {
        opacity: 0;
      }
    }

    &_frame {
      order: 1;

      img {
        @include breakpoint-down('deskS') {
          width: 87px;
        }
      }
    }

    &_quadcode {
      order: 2;

      img {
        @include breakpoint-down('deskS') {
          width: 101px;
        }
      }
    }

    &_iq {
      order: 3;

      img {
        @include breakpoint-down('deskS') {
          width: 93px;
        }
      }
    }

    &_qcex {
      order: 4;

      img {
        @include breakpoint-down('deskS') {
          width: 60px;
        }
      }
    }

    &_ex {
      img {
        @include breakpoint-down('deskS') {
          width: 108px;
        }
      }
    }

    &_market {
      order: 7;

      @include breakpoint-down('tabM') {
        order: 6;
      }

      img {
        @include breakpoint-down('deskS') {
          width: 96px;
        }
      }
    }

    &_invetra {
      order: 8;
      img {
        width: 140px;
        @include breakpoint-down('deskS') {
          width: 100px;
        }
      }
    }

    &_westiva {
      order: 5;

      img {
        @include breakpoint-down('deskS') {
          width: 100px;
        }
      }
    }

    &_sabio {
      order: 6;

      @include breakpoint-down('tabM') {
        order: 7;
      }

      img {
        @include breakpoint-down('deskS') {
          width: 53px;
        }
      }
    }

    &_qcm {
      img {
        @include breakpoint-down('deskS') {
          width: 58px;
        }
      }
    }

    &:hover {
      transition: .4s ease;
    }
  }

  &__link {
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
  }
}