NUXT_FRONTEND/components/Video/Item.vue

<template>
  <nuxt-link tag="div" :to="link" class="item">
    <div class="item-image">
      <img :src="item.image.url" :alt="item.image.title" />
    </div>
    <div class="item-title" v-html="item.title"></div>
    <div class="item-date">{{ date }}</div>
  </nuxt-link>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      required: true,
    },
  },

  computed: {
    link() {
      return {
        name: "video-category-alias",
        params: {
          category: this.item.category.alias,
          alias: this.item.alias,
        },
      };
    },

    date() {
      const options = { month: "long", day: "numeric" };
      const date = new Date(this.item.start_activity * 1000);
      return date.toLocaleDateString("ru-RU", options);
    },
  },
};
</script>

<style lang="less" scoped>
.item {
  aspect-ratio: 420 / 260;
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  color: #fff;
  padding: 10px 25px;
  cursor: pointer;

  &-image {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    filter: brightness(70%);
    transition: all 0.2s linear;

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

  &:hover &-image {
    filter: brightness(90%);
  }

  &-title {
    position: relative;
    z-index: 1;
    margin-top: auto;
    font-weight: bold;
    font-size: 24px;
    line-height: 120%;
  }
  &-date {
    margin-top: 10px;
    position: relative;
    z-index: 1;
    color: rgba(255, 255, 255, 0.5);
  }

  @media screen and(max-width: 1300px) {
    &-title {
      font-size: 1.8vw;
    }
  }

  @media screen and(max-width: 768px) {
    &-title {
      font-size: 18px;
    }
  }
}
</style>