/*================================================
Yoga About Area CSS
=================================================*/
.yoga-about-content {
  margin-top: -15px;
}

.yoga-about-content h2 {
  font-size: 40px;
  margin-bottom: 20px;
}

.yoga-about-content p {
  margin-bottom: 30px;
}

.yoga-about-img-group {
  margin-top: -48px;
}

.yoga-about-img-group .classes {
  position: relative;
  display: block;
}

.yoga-about-img-group .classes::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: -webkit-gradient(linear, left top, left bottom, from(#fde39a), to(#ff99cc));
  background: linear-gradient(to bottom, #fde39a, #ff99cc);
  opacity: 0;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.yoga-about-img-group .classes h3 {
  position: absolute;
  left: 30px;
  right: 30px;
  bottom: 20px;
  margin-bottom: 0;
  text-align: center;
  color: var(--whiteColor);
  font-size: 20px;
  opacity: 0;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.yoga-about-img-group .classes:hover::before {
  opacity: 0.9;
}

.yoga-about-img-group .classes:hover h3 {
  opacity: 1;
}

/* Max width 767px */
@media only screen and (max-width: 767px) {
    .yoga-about-content h2 {
        font-size: 25px;
        margin-bottom: 10px;
        margin-top: -9px;
    }
    .yoga-about-img-group .classes {
        margin-bottom: 30px;
    }
}

/* Min width 768px to Max width 991px */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .yoga-about-content h2 {
        font-size: 25px;
        margin-bottom: 10px;
        margin-top: -9px;
    }
    .yoga-about-img-group .classes {
        margin-bottom: 30px;
    }
}