.onschool { padding: 0 0 20px; }

.onschool-accent { color: var(--color-blue-accent); font-weight: 700; }

.onschool__grid {
  display: grid;
  grid-template-columns: minmax(0, 946fr) minmax(0, 914fr);
  gap: var(--gap-cards);
  align-items: stretch;
}

.onschool__col {
  display: grid;
  grid-template-rows: minmax(0, 209fr) minmax(0, 249fr);
  gap: var(--gap-cards);
  min-width: 0;
}

@media (min-width: 1025px) {
  .onschool__col { contain: size; }
}

.onschool-card {
  background: var(--color-white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: clamp(16px, 1.596cqw, 30px);
}

.onschool-card__title {
  font-size: var(--fs-h4);
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
}

.onschool-card__desc {
  color: var(--color-gray-2);
  font-size: var(--fs-text);
  line-height: 1.4;
}

.onschool-online {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  background: var(--tint-sky-2);
  padding: clamp(16px, 1.596cqw, 30px);
}

.onschool-online::before {
  content: "";
  position: absolute;
  right: 3.2%;
  bottom: 2.2%;
  width: 34%;
  aspect-ratio: 312 / 188;
  border-radius: 50%;
  background: var(--tint-circle);
}

.onschool-online__text {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 0.6cqw, 11px);
  max-width: 30.85cqw;
}

.onschool-online__title {
  color: var(--color-blue-accent);
  font-family: var(--font-heading);
  font-size: max(17px, 1.34cqw);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  max-width: 26.6cqw;
}

.onschool-online__subtitle {
  max-width: 28.4cqw;
  color: var(--color-black);
  font-size: max(14px, 0.995cqw);
  font-weight: 400;
  line-height: 1.3;
}

.onschool-online__diploma {
  position: absolute;
  left: 65.5%;
  bottom: -0.32cqw;
  z-index: 1;
  width: 34.9%;
  height: auto;
}

.license {
  position: relative;
  overflow: hidden;
  background: var(--tint-cream);
  padding: clamp(20px, 2.447cqw, 46px) clamp(20px, 2.66cqw, 50px) clamp(20px, 2.66cqw, 50px);
  min-height: clamp(160px, 13.245cqw, 249px);
}

.license::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../assets/img/onschool/blob-license.webp") 100% 0 / 100% 100% no-repeat;
}

.license__text {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 19px;
  max-width: 28.46cqw;
}

.license .onschool-card__desc { color: var(--color-black); }

.license__img {
  position: absolute;
  top: 0;
  left: 57.1%;
  width: 42.9%;
  height: auto;
}

@media (max-width: 1280px) {
  .license__text { max-width: 55%; }
}

@media (max-width: 1024px) {
  .license::before { background-size: auto 100%; }

  .onschool__grid { grid-template-columns: 1fr; }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .onschool-online { min-height: 25.5cqw; }
  .onschool-online__diploma,
  .landing--1-4 .onschool-online__diploma,
  .landing--5-9 .onschool-online__diploma,
  .landing--10-11 .onschool-online__diploma {
    left: auto;
    right: 3%;
    top: auto;
    bottom: 0;
    width: 27cqw;
    aspect-ratio: auto;
  }
}

@media (max-width: 767px) {
  .onschool { padding: 0 0 50px; }

  .onschool__grid { gap: 10px; }

  .onschool__col,
  .onschool__col--right { display: flex; flex-direction: column; gap: 10px; }

  .onschool-card { padding: 20px; }

  .onschool-card__title {
    width: fit-content;
    background-image: linear-gradient(var(--color-light-blue), var(--color-light-blue));
    background-size: 100% 28px;
    background-position: 0 50%;
    background-repeat: no-repeat;
    padding-inline: 2px;
    margin-left: -2px;
  }

  .onschool-online { padding: 20px; }
  .onschool-online__text { max-width: none; }
  .onschool-online__title { max-width: none; font-size: 20px; }
  .onschool-online__subtitle { max-width: none; font-size: 16px; line-height: 1.35; }
  .onschool-online { padding-bottom: 0; }
  .onschool-online__diploma { position: relative; left: auto; top: auto; bottom: auto; width: min(60cqw, 240px); max-width: none; margin: 12px -20px 0 auto; transform: translateX(0); }
  .onschool-online {
    --dip-w: min(60cqw, 240px);
    --circle-w: min(92cqw, 400px);
  }
  .onschool-online::before {
    inset: auto auto calc(var(--dip-w) * 0.2978 - var(--circle-w) / 2 - var(--circle-w) * 0.12) calc(100% - var(--dip-w) / 2 - var(--circle-w) / 2 + var(--circle-w) * 0.12);
    width: var(--circle-w);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--tint-circle);
  }

  .license {
    display: block;
    padding: 20px 20px 0;
    overflow: hidden;
  }

  .license {
    --scan-w: min(76%, 320px);
    --circle-w: min(92%, 400px);
  }
  .license::before {
    inset: auto auto -30% auto;
    right: calc(min(0.76 * (100% - 40px), 320px) / 2 + 6px - var(--circle-w) / 2);
    width: var(--circle-w);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--tint-sand);
  }

  .license__text { max-width: none; gap: 10px; }

  .license .onschool-card__desc { max-width: none; font-size: 16px; line-height: 1.35; }

  .license__img {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    display: block;
    width: var(--scan-w);
    height: auto;
    margin: 6px -14px -90px auto;
    transform: rotate(10deg);
    transform-origin: 50% 60%;
  }
}