.disable {
  pointer-events: none;
}

.screenItem {
  padding-bottom: 67.44%;
  position: relative;
  cursor: pointer;

  .screenItemBack {
    position: absolute;
    top: 22px;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 2px;
    background: #1f212c;
    box-shadow: 0px 16px 16px rgba(0, 0, 0, 0.08);
  }

  .screenItemImgWrapper {
    position: absolute;
    top: 0;
    padding: 0 17px;
    width: 100%;
    height: calc(~'100% - 48px');
  }

  .screenItemImg {
    height: 100%;
    position: relative;
    cursor: pointer;

    .img {
      border: 1px solid var(--easyv-background-6);
      border-top-left-radius: 2px;
      border-top-right-radius: 2px;
      transition: transform 0.2s;
      width: 100%;
      height: 100%;
      position: relative;
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        background-color: rgb(24, 25, 38);
      }

      &:after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        background-color: rgba(0, 0, 0, 0.8);
      }
    }
    &:hover {
      .img {
        transform: scale(1.05);

        &:after {
          opacity: 1;
        }
      }
    }

    &:hover div:nth-child(2) {
      opacity: 1;
      display: block;
    }
  }
}

.content {
  height: 56px;
  overflow: hidden;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}
