.school-day {
  padding-block: 20px;
}

.school-day__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 2.128cqw, 40px);
}

.school-day__head {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 0.851cqw, 16px);
}

.school-day__title {
  font-size: var(--fs-h2);
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.05;
}

.school-day__subtitle {
  font-size: var(--fs-h4);
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-gray-2);
}

.school-day__steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-cards);
  padding-inline: 0.851cqw;
}

.school-day__step {
  position: relative;
  overflow: hidden;
  min-height: 16.44cqw;
  padding: clamp(16px, 1.596cqw, 30px);
  border-radius: var(--radius-card);
  background: var(--color-white);
  box-shadow: var(--shadow-card);
}

.school-day__step::before {
  content: "";
  position: absolute;
  z-index: 0;
  right: -6cqw;
  bottom: -8cqw;
  width: 26cqw;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--blob);
}

.school-day__text {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.6cqw;
  max-width: 30.85cqw;
}

.school-day__step-text { max-width: 26.06cqw; }

.school-day__step-title {
  color: var(--color-black);
  font-family: var(--font-heading);
  font-size: max(18px, 1.5cqw);
  font-weight: 700;
  line-height: 1.3;
}

.school-day__step-text {
  color: var(--color-black);
  font-size: var(--fs-btn);
  line-height: 1.5;
}

.school-day__img {
  position: absolute;
  z-index: 1;
  height: auto;
}

.school-day__step--live { background: var(--color-sky-blue); --blob: var(--color-blue); }
.school-day__step--live .school-day__step-title,
.school-day__step--live .school-day__step-text { color: var(--color-white); }
.school-day__step--live .school-day__img { left: 67.3%; bottom: -1.6cqw; width: 36.4%; }

.school-day__step--records { background: var(--tint-sky-2); min-height: 16.49cqw; --blob: var(--tint-circle); }
.school-day__step--records .school-day__text { max-width: 35.3cqw; }
.school-day__step--records .school-day__step-text { max-width: 27cqw; font-size: max(14px, 0.995cqw); line-height: 1.3; }
.school-day__step--records .school-day__img { left: 65%; bottom: 0; width: 32.7%; }

.school-day__step--homework { padding-top: clamp(16px, 2.287cqw, 43px); --blob: var(--tint-pink); }
.school-day__step--homework .school-day__step-title { font-size: max(18px, 1.5cqw); line-height: 1.3; }
.school-day__step--homework .school-day__text { gap: 2.7cqw; }
.school-day__step--homework .school-day__step-text { color: var(--color-gray-1); }
.school-day__step--homework .school-day__img { left: 63.6%; bottom: -3.5cqw; width: 42.3%; }

.school-day__step--check { min-height: 16.54cqw; background: var(--tint-cream); padding: clamp(16px, 2.447cqw, 46px) clamp(16px, 2.66cqw, 50px); --blob: var(--tint-sand); }
.school-day__step--check .school-day__text { max-width: 28.46cqw; gap: 1cqw; }
.school-day__step--check .school-day__step-title { font-size: max(18px, 1.5cqw); line-height: 1.3; }
.school-day__step--check .school-day__img { left: 61.8%; bottom: -0.75cqw; width: 39.6%; }

@media (max-width: 767px) {
  .school-day { padding-block: 0; }

  .school-day__inner {
    gap: 20px;
    padding-block: var(--section-pad-y) 0;
  }

  .school-day__steps { grid-template-columns: 1fr; }

  .school-day__step {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 20px;
  }

  .school-day__step,
  .school-day__step--check { padding: 20px; }

  .school-day__text,
  .school-day__step-text,
  .school-day__step--records .school-day__text,
  .school-day__step--records .school-day__step-text,
  .school-day__step--check .school-day__text { max-width: none; gap: 8px; }

  .school-day__step-title,
  .school-day__step--homework .school-day__step-title,
  .school-day__step--check .school-day__step-title { font-size: clamp(20px, 6.1vw, 26px); line-height: 1.2; }

  .school-day__step--records .school-day__step-text { font-size: var(--fs-btn); }

  .school-day__img {
    position: relative;
    left: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 88% !important;
    margin: -4px 0 -20px auto;
  }
  .school-day__step:nth-child(even) .school-day__img { margin-inline: 0 auto; }

  .school-day__step::before {
    inset: auto auto -5% 50%;
    width: 82%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--blob);
    transform: translateX(-50%);
  }
}