.format-card {
   position: relative;

   &__image {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;

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

   &__substrate {
      position: absolute;
      z-index: 1;
      bottom: 0;
      left: 0;
      right: 0;
      width: 100%;
      background: #ffffff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #231f20;
      transition: color 0.2s;

      padding: 13px 13px;

      @include _XSDesktop {
         padding: 12px 13px;
      }
      @include _Desktop {
         padding: 8px 11px;
      }

      @include _HDesktop {
         padding: 18px 18px;
      }
   }

   &__title {
   }

   &__arrow {
      .arrow-link__arrow {
         transition: border-color 0.2s;
         width: 26px;
         height: 26px;

         @include _XSDesktop {
            width: 24px;
            height: 24px;
         }

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

         img {
            width: 7px;
            height: 7px;

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

.format-card__arrow.arrow-link .arrow-link__arrow::after {
   background-size: 7px 7px;

   @include _HDesktop {
      background-size: 10px 10px;
   }
}

.format-card:hover {
   .format-card__substrate {
      background-color: cl("accent");
      color: #ffffff;
   }

   .arrow-link__arrow {
      border-color: #ffffff;
   }
   .arrow-link__arrow img {
      transform: translate(20px, -20px);

      @include _HDesktop {
         transform: translate(24px, -24px);
      }
   }

   .arrow-link .arrow-link__arrow::after {
      transform: translate(0, 0);
      transition: transform 0.2s cubic-bezier(0.18, -0.43, 0.9, 1.07) 0.1s;
      filter: brightness(0) invert(1); /* белый */
   }
}
