.article {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border-radius: 12px;

  > img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1;
    aspect-ratio: 16/9;
  }

  .content {
    aspect-ratio: 16/9;
    position: relative;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 2;
    background: var(--overlay-02, rgb(30 30 30 / 35%));

    .tag {
      width: 83px;
      height: 24px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 50px;
      position: absolute;
      top: var(--basePadding6);
      right: var(--basePadding6);
      z-index: 3;
      background-color: var(--primary-03);

      @include font-footnote;

      svg {
        width: 18px;
        height: 18px;
        color: var(--neutral-09);
      }

      span {
        margin-left: var(--padding);
        color: var(--neutral-09);
      }
    }

    .info {
      position: absolute;
      width: 100%;
      bottom: 0;
      padding: var(--basePadding6);
      z-index: 3;
      box-sizing: border-box;

      .user {
        :global {
          .ant-avatar {
            width: 24px;
            height: 24px;
            margin-right: var(--basePadding2);
          }
        }

        .name {
          @include font-subheader2;

          color: var(--neutral-white);
        }
      }

      .title {
        @include font-header3;

        color: var(--neutral-white);
      }

      .summary {
        color: var(--neutral-02, #ededed);

        /* Label */
        font-size: 14px;
        font-family: 'Noto Sans', sans-serif;
        font-weight: 500;
        line-height: 22px;
      }
    }
  }
}
