.cases-item {
   height: 340px;
   position: relative;

   @include _Tablet {
      height: 266px;
   }

   @include _XSDesktop {
      height: 243px;
   }

   @include _Desktop {
      height: 288px;
   }
   @include _HDesktop {
      height: 475px;
   }

   &:hover {
      .arrow-link__arrow img {
         transform: translate(20px, -20px);
      }

      .arrow-link__arrow::after {
         transform: translate(0, 0);
      }
   }

   &__cover {
      width: 100%;
      height: 100%;
      object-fit: cover;
      overflow: hidden;

      img {
         width: 100%;
         height: 100%;
         object-fit: cover;
      }
   }

   &__substrate {
      --bg-color: #{cl("bg")};
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      background-color: var(--bg-color);
      padding: 19px 16px;
      letter-spacing: -2%;

      @include _Tablet {
      }

      @include _XSDesktop {
         padding: 14px 16px;
      }
      @include _HDesktop {
         padding: 19px 20px;
      }

      .arrow-link__text {
         text-transform: none;
      }

      .arrow-link__arrow {
         width: 25px;
         height: 25px;

         @include _XSDesktop {
            width: 23px;
            height: 23px;
         }
         @include _Desktop {
            width: 27px;
            height: 27px;
         }

         @include _HDesktop {
            width: 45px;
            height: 45px;
         }

         &::after {
            background-size: 6px 6px;

            @include _Tablet {
               background-size: 8px 8px;
            }

            @include _HDesktop {
               background-size: 13px 14px;
            }
         }

         img {
            height: 6px;
            width: 6px;

            @include _Tablet {
               height: 8px;
               width: 8px;
            }

            @include _HDesktop {
               height: 12px;
               width: 14px;
            }
         }
      }
   }
}
