/*
Figma has a bug where the layers of any multiple-background definition are in
REVERSE ORDER
so you will need to manually invert the ordering.  Also simplify their linear-gradients-that-are-just-solid-colors.
 */
.plans-cta {
  min-width: 240px;
  text-align: center;
}
@media (max-width: 767.9px) {
  .plans-cta {
    width: 100%;
  }
}

.plans-image {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
}
@media (max-width: 767.9px) {
  .plans-image {
    padding: 16px 0;
  }
}
.plans-image img {
  position: relative;
  z-index: 2;
  border-radius: 8px;
  max-width: 100%;
  height: 300px;
}
.plans-image .plans-image__overlay-text {
  z-index: 3;
  text-align: center;
  flex: none;
  font-family: "Poppins", sans-serif;
  font-size: 26px;
  line-height: 32px;
  font-weight: 700;
  color: #000000;
  letter-spacing: -0.02em;
}
@media (min-width: 768px) {
  .plans-image .plans-image__overlay-text {
    font-family: "Poppins", sans-serif;
    font-size: 36px;
    line-height: 44px;
    font-weight: 700;
    color: #000000;
    letter-spacing: -0.02em;
  }
}
@media (min-width: 1280px) {
  .plans-image::before, .plans-image::after {
    content: "";
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 1;
  }
  .plans-image::before {
    background-image: url("/images/plans/yellow_star.svg");
    width: 120px;
    height: 120px;
    left: 20%;
    top: 55%;
  }
  .plans-image::after {
    background-image: url("/images/plans/blue_shape.svg");
    width: 150px;
    height: 150px;
    right: 20%;
    top: 28%;
  }
}

@media (min-width: 1280px) {
  .plans-image--image-on-right::before {
    left: 62%;
  }
  .plans-image--image-on-right::after {
    right: 60%;
  }
}

.college-starter-edition .plans-image {
  background: linear-gradient(287.42deg, rgba(255, 255, 255, 0) 1.1%, rgba(255, 238, 223, 0.75) 100%), #E6ECFF;
}

.college-saver-edition .plans-image {
  background: linear-gradient(266deg, rgba(255, 255, 255, 0) 1.46%, rgba(245, 235, 200, 0.75) 105.31%), #E7F8FF;
}

.test-prep-edition .plans-image {
  background: linear-gradient(290.81deg, rgba(255, 255, 255, 0) -5.51%, rgba(195, 248, 255, 0.75) 100.94%), #FFF6F6;
}

.study-edition .plans-image {
  background: linear-gradient(261.49deg, rgba(255, 255, 255, 0) 13.74%, rgba(243, 233, 212, 0.75) 100%), #FFFCF6;
}

.classroom-teacher-edition .plans-image {
  background: linear-gradient(180deg, rgba(248, 248, 245, 0) 0%, #F8F8F5 43%), linear-gradient(265.54deg, rgba(255, 255, 255, 0) 1.46%, rgba(245, 235, 200, 0.75) 105.31%), #E7F8FF;
}

/*# sourceMappingURL=plansPage.css.map */