.hero-detail {
  position: relative;
  height: 70vh;
  margin-top: 80px;
  overflow: hidden;
  max-height: 520px;
}
.hero-detail:before {
  position: absolute;
  left: 0;
  right: 0;
  content: '';
  background: linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.5) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  height: 100%;
  width: 100%;
  z-index: 1;
}
.hero-detail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
}
.hero-detail h1 {
  z-index: 2;
}

.divider {
  margin-top: 24px;
  margin-bottom: 24px;
  border: solid 1.5px #dfdfdf;
}

/* ebooklet */
.e-booklet {
  padding-top: 115px;
  padding-bottom: 100px;
}
.e-booklet h2 {
  font-weight: 700;
  font-size: 32px;
  margin-bottom: 10px;
  color: var(--blue);
  /* line-clamp: 2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis; */
}
.e-booklet h2:hover {
  display: block;
  transition: all;
  transition-duration: 300ms;
}
.e-booklet h5 {
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 16px;
  color: #181818;
}

.e-booklet p {
  color: #4f4f4f;
  font-size: 16px;
  max-width: 704px;
}

.img-ebooklet {
  height: 504px;
  width: 360px;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.img-ebooklet img {
  object-fit: cover;
  overflow: hidden;
}