.hero-case {
   margin: 0 auto;

   @include _Tablet {
      margin: 0;
   }
   &__wrapper {
      background-color: #ffffff;
      color: #231f20;
   }

   &__body {
      display: grid;
      grid-template-columns: 180px auto;

      @include _Tablet {
         grid-template-columns: 160px auto;
      }

      @include _HDesktop {
         grid-template-columns: 280px auto;
      }
   }

   &__left {
      position: relative;
   }

   &__preview {
      height: 100%;
      min-height: 126px;

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

      @include _XSDesktop {
         min-height: 117px;
      }

      @include _HDesktop {
         height: 182px;
      }
   }

   &__play {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 32px;
      height: 32px;
      background-color: cl("accent");
      border: 1px solid cl("accent");
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background-color 0.3s;

      svg {
         margin-left: 4px;
      }

      &:hover {
         background-color: transparent;
      }

      @include _HDesktop {
         width: 66px;
         height: 66px;

         svg {
            width: 25px;
            margin-left: 7px;
         }
      }
   }

   &__info {
      padding: 11px 12px 11px 16px;
      display: flex;
      flex-direction: column;

      @include _Tablet {
         padding: 8px 24px 8px 16px;
      }

      @include _XSDesktop {
         padding: 11px 16px;
      }
      @include _HDesktop {
         padding: 13px 24px;
      }
   }

   &__label {
      color: #231f2033;
      margin-bottom: auto;

      font-size: rem(12);

      @include _XSDesktop {
         font-size: rem(10);
      }

      @include _HDesktop {
         font-size: rem(16);
      }
   }

   &__title {
      font-weight: 700;
      margin-bottom: 4px;
      text-transform: uppercase;

      @include _HDesktop {
         margin-bottom: 16px;
      }
   }

   &__descr {
      color: #231f2099;
      font-size: rem(14);

      @include _XSDesktop {
         font-size: rem(12);
      }

      @include _HDesktop {
         font-size: rem(16);
      }
   }
}

.hero-case--mobile {
   background-color: #231f20;
   padding: 40px 10px 24px;
   @include _Tablet {
      display: none;
   }
}

.hero-case--desktop {
   display: none;
   @include _Tablet {
      display: block;
   }
}
