VNT-B2B Subitems

<div class="subitems --column --w-12">
    <div class="subitems__wrapper">
        <ul class="subitems__list  --row">
            <li class="subitems__list-item subitems__item --column --w-12 --w-s-6 --w-l-3">
                <a href="#" class="subitems__item-link">
                    <div class="subitems__item-figure">
                        <img src="/userfiles/images/controller.jpg" class="subitems__item-img" alt="foto kategorie">
                    </div>
                    <div class="subitems__name">
                        Podkategorie
                        <span class="subitems__number">
                        (10)
                    </span>
                    </div>
                    <span class="subitems__arrow arrow--right"></span>
                </a>
            </li>
            <li class="subitems__list-item subitems__item --column --w-12 --w-s-6 --w-l-3">
                <a href="#" class="subitems__item-link">
                    <div class="subitems__item-figure">
                        <img src="/userfiles/images/controller.jpg" class="subitems__item-img" alt="foto kategorie">
                    </div>
                    <div class="subitems__name">
                        Podkategorie na dva řádky
                        <span class="subitems__number">
                        (10)
                    </span>
                    </div>
                    <span class="subitems__arrow arrow--right"></span>
                </a>
            </li>
            <li class="subitems__list-item subitems__item --column --w-12 --w-s-6 --w-l-3">
                <a href="#" class="subitems__item-link">
                    <div class="subitems__item-figure">
                        <img src="/userfiles/images/controller.jpg" class="subitems__item-img" alt="foto kategorie">
                    </div>
                    <div class="subitems__name">
                        Podkategorie
                        <span class="subitems__number">
                        (10)
                    </span>
                    </div>
                    <span class="subitems__arrow arrow--right"></span>
                </a>
            </li>
            <li class="subitems__list-item subitems__item --column --w-12 --w-s-6 --w-l-3">
                <a href="#" class="subitems__item-link">
                    <div class="subitems__item-figure">
                        <img src="/userfiles/images/controller.jpg" class="subitems__item-img" alt="foto kategorie">
                    </div>
                    <div class="subitems__name">
                        Podkategorie na dva řádky
                        <span class="subitems__number">
                        (10)
                    </span>
                    </div>
                    <span class="subitems__arrow arrow--right"></span>
                </a>
            </li><li class="subitems__list-item subitems__item --column --w-12 --w-s-6 --w-l-3">
                <a href="#" class="subitems__item-link">
                    <div class="subitems__item-figure">
                        <img src="/userfiles/images/controller.jpg" class="subitems__item-img" alt="foto kategorie">
                    </div>
                    <div class="subitems__name">
                        Podkategorie
                        <span class="subitems__number">
                        (10)
                    </span>
                    </div>
                    <span class="subitems__arrow arrow--right"></span>
                </a>
            </li>
            <li class="subitems__list-item subitems__item --column --w-12 --w-s-6 --w-l-3">
                <a href="#" class="subitems__item-link">
                    <div class="subitems__item-figure">
                        <img src="/userfiles/images/controller.jpg" class="subitems__item-img" alt="foto kategorie">
                    </div>
                    <div class="subitems__name">
                        Podkategorie na dva řádky
                        <span class="subitems__number">
                        (10)
                    </span>
                    </div>
                    <span class="subitems__arrow arrow--right"></span>
                </a>
            </li><li class="subitems__list-item subitems__item --column --w-12 --w-s-6 --w-l-3">
                <a href="#" class="subitems__item-link">
                    <div class="subitems__item-figure">
                        <img src="/userfiles/images/controller.jpg" class="subitems__item-img" alt="foto kategorie">
                    </div>
                    <div class="subitems__name">
                        Podkategorie
                        <span class="subitems__number">
                        (10)
                    </span>
                    </div>
                    <span class="subitems__arrow arrow--right"></span>
                </a>
            </li>
            <li class="subitems__list-item subitems__item --column --w-12 --w-s-6 --w-l-3">
                <a href="#" class="subitems__item-link">
                    <div class="subitems__item-figure">
                        <img src="/userfiles/images/controller.jpg" class="subitems__item-img" alt="foto kategorie">
                    </div>
                    <div class="subitems__name">
                        Podkategorie na dva řádky
                        <span class="subitems__number">
                        (10)
                    </span>
                    </div>
                    <span class="subitems__arrow arrow--right"></span>
                </a>
            </li>
        </ul>
    </div>
</div>

.subitems{
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;

  @include media($large){
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}

.subitems__list{
  row-gap: 1.6rem;
}

.subitems__item-link{
  display: flex;
  align-items: center;
  flex-direction: row;
  padding: 0.6rem 1.5rem 0.6rem 0.6rem;
  border: 1px solid $color__border;
  border-radius: 0.4rem;
  transition: $ease;
  position: relative;
  width: 100%;
  flex: 1;
  min-height: 6.4rem;

  &:hover, &:focus, &:active{
    box-shadow: (0 0 0.6rem rgba(129, 113, 180, 0.40)) ;
  }
}

.subitems__item-figure{
  max-width: 5.1rem;
  max-height: 5.1rem;
  min-height: 4rem;
  min-width: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 1rem;
}

.subitems__item-img{
  width: 100%;
  height: 100%;
}

.subitems__name{
  max-width: 14rem;
  color: $color__text;
}