/*Classes section*/
.class-container {
  display: flex;
  flex-direction: column;
}

.class,
.desc-box {
  flex-direction: column;
  gap: 2rem;
  overflow: hidden;
}

.img-box {
  max-width: 500px;
  max-height: 500px;
  overflow: hidden;
}

.img-box img {
  max-width: 100%;
  max-height: 100%;
  display: block;
  filter: grayscale(100%);
}

.desc-text {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 1.5rem;
  padding: 0.5rem;
  overflow: hidden;
}

.desc-head {
  padding: 0.5rem 0.7rem;
  background-color: #666362;
  color: #fff;
  width: fit-content;
}

.desc-text-group {
  line-height: 1.8rem;
}

.schedule {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.schedule-pdf {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

#adultclass {
  padding-top: 3rem;
}

/*Programs & Workshop section*/
.pw-container {
  flex-direction: column;
  gap: 4rem;
  margin-bottom: 4rem;
  overflow: hidden;
}

.pw-item {
  flex-direction: column;
  gap: 2rem;
}

.pw-text {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  width: 100%;
  overflow: hidden;
}

.pw-text p {
  line-height: 1.5rem;
}

.pw-text a i {
  font-size: 1.6rem;
  color: #666362;
}

.btn {
  width: 130px;
}

.pw-img {
  max-width: 500px;
  max-height: 500px;
  overflow: hidden;
}

.pw-img img {
  max-width: 100%;
  max-height: 100%;
  display: block;
  overflow: hidden;
}

.pw-img iframe {
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

/*Media Queries*/
@media only screen and (max-width: 393px) {
  .program-intro h2 {
    font-size: 1.2rem;
  }
}
@media only screen and (min-width: 768px) {
  /* .desc-box {
    width: 100%;
  } */

  .desc-text {
    flex-direction: row;
    gap: 2rem;
  }

  .schedule {
    align-items: center;
  }

  .schedule-pdf {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }

  .pw-text {
    width: 500px;
  }

  .pw-img iframe {
    width: 500px;
  }

  .pw-container {
    gap: 8rem;
  }
}

@media only screen and (min-width: 1024px) {
  .class {
    flex-direction: row;
  }

  #adultclass {
    padding-top: 5rem;
    padding-bottom: 5rem;
    flex-direction: row-reverse;
  }

  .pw-item {
    flex-direction: row;
  }

  .reverse {
    flex-direction: row-reverse;
  }
}

@media only screen and (min-width: 1440px) {
  .pw-item {
    gap: 10rem;
  }
}

@media only screen and (min-width: 1600px) {
  .class {
    gap: 4rem;
  }
}