@import "../../app/variables";

.hello_shop-slide {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  transition: 300ms;
  .w-100 {
    width: 100px;
  }
  .h-160{
    height: 160px;
  }
  .text-limited-title {
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
  }

  .image {
    height: 160px;
    width: 100%;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 5px;
      transition: 300ms;

    }

    &:hover {
      img {
        transform: scale(1.2);
      }
    }
  }

  .content {
    width: 100%;

    .text-limited {
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .text-limited-main {
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    p {
      font-size: 0.875rem;
      color: $text-medium;
      text-align: center;

    }

    .button-group {
      .read {
        padding: 7px 16px;
        background-color: $primary-amber;
        outline: none;
      }

      .whatch {
        background-color: $text-medium;
        padding: 4px 18px;
        outline: none;

        span {
          color: $pure-white;
        }
      }
    }
  }
}