.course-card {
  overflow: hidden;

  &:hover {
    .cover {
      background-size: 105%;
    }
  }

  .cover {
    transition: background-size 0.25s linear;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    .mask {
      transition: background-image 0.25s linear;
      position: relative;
      height: 100%;
      background-image: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.7),
        rgba(0, 0, 0, 0.1),
        rgba(255, 255, 255, 0)
      );
      p {
        margin: 0;
        position: absolute;
        bottom: 10px;
        left: 10px;
        right: 10px;
        color: #fff;
        font-size: 18px;
      }
    }
  }
}