#admission {
  height: 100vh;
}

.aurora-bg {
  overflow: hidden;
  position: relative;
  /* height: 100vh; /* or vh */ */
}

.aurora-bg::before {
  z-index: -1;
  content: "";

  position: absolute;
  top: 50%;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 150%;

  background: linear-gradient(83.21deg, var(--secondaryColor2) 0%, var(--secondaryColor1) 100%);

  background-blend-mode: overlay;

  -webkit-mask-image: radial-gradient(
    rgba(0, 0, 0, 1),
    transparent 70%
    );

  /* mask-image: radial-gradient(rgba(0, 0, 0, 0.5), transparent 100%); */
}

.admission-container {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  text-align: center;
  gap: 1rem;
  height: 100%;
}

.admission-text {
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: -4rem;
}

mark {
  -webkit-animation: 1.5s highlight 1.5s 1 normal forwards;
          animation: 1.5s highlight 1.5s 1 normal forwards;
  background-color: none;
  background: linear-gradient(90deg, var(--secondaryColor3) 50%, rgba(255, 255, 255, 0) 50%);
  background-size: 200% 100%;
  background-position: 100% 0;
  border-radius: 8px;
  padding: 0.1rem 0.25rem;
}

@-webkit-keyframes highlight {
  to {
    background-position: 0 0;
  }
}

@keyframes highlight {
  to {
    background-position: 0 0;
  }
}

.admission-intro-title,
.admission-intro-title mark {
  line-height: 2.5rem;
  color: var(--primaryColor1);
}

.admission-intro-subtitle {
  color: var(--primaryColor2);
}

.intro-btn {
  align-self: center;
}

.introBtn {
  transition: 0.3s ease;
  border-radius: 10px;
  color: var(--bgColor1);
  background: var(--secondaryColor2);
  padding: 1rem 1.25rem;
  width: 9rem;
}

.introBtn:hover {
  background: none;
  outline: 2px solid var(--primaryColor2);
  color: var(--primaryColor2);
}

.child-intro-img {
  position: relative;
  left: 3%;
  z-index: -1;
}

.child-intro-img img {
  width: 50rem;
}

/* ----------- media query (tablet) ----------- */
@media screen and (max-width: 1024px) {
  #admission {
    height: 100%;
  }

  .admission-container {
    padding-top: 7rem;
  }

  .child-intro-img  img {
    width: 42rem;
  }
}

/* ----------- media query (phone) ----------- */
@media screen and (max-width: 600px) {
  #admission .admission-container {
    height: 100vh;
    width: 100%;
  }

  .admission-text {
    display: grid;
    place-items: center;
    width: var(--container-width-sm);
    margin-bottom: 0;
  }

  .child-intro-img {
    width: var(--container-width-sm);
    display: flex;
    justify-content: center;
    /* left: -26%; */
  }

  .child-intro-img img {
    width: 39rem;
  }

  .introBtn {
    width: 8rem;
    padding: 0.9rem 1rem;
  }

  .aurora-bg::before {
    top: 55%;
    left: -26%;
    width: 140%;
    height: 100%;
  }
}