/* ==========================================================================
   在线平台 / 学习采购（page_6_zaixianpingtai.png）
   素材目录 assets/xuexipingtai/；页脚上边线约 2560
   ========================================================================== */

.section--hero {
  padding-top: 0;
}

.plt-hero {
  width: 100%;
  height: auto;
  display: block;
}

.platform {
  display: grid;
  grid-template-columns: minmax(22rem, 32rem) minmax(0, 1fr);
  gap: 4rem;
  align-items: center;
  padding-top: 5.6rem;
}

.platform--tanxunzhe {
  grid-template-columns: minmax(0, 1fr) minmax(22rem, 32rem);
  padding-top: 8rem;
}

.platform__phone {
  width: 100%;
  max-width: 32rem;
  height: auto;
  display: block;
  justify-self: center;
}

.platform__brand {
  font-size: var(--fs-h2-sm);
  line-height: var(--lh-tight);
  font-weight: 700;
  color: var(--c-primary);
}

.platform__tag {
  margin-top: 1.2rem;
  font-size: var(--fs-body);
  color: var(--c-muted);
}

.platform .prose {
  margin-top: 2rem;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.2rem;
  margin-top: 2.8rem;
}

.feature-grid li {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 6.4rem;
  padding: 1.2rem;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-card);
  font-size: var(--fs-note);
  color: var(--c-text);
  text-align: center;
}

.section--courses {
  padding-top: 8rem;
  padding-bottom: 8rem;
}

.gallery--4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2.4rem;
  margin-top: 3.6rem;
}

.gallery--4 img {
  width: 100%;
  height: 17.6rem;
  object-fit: cover;
  display: block;
  border-radius: 0.4rem;
}

@media (max-width: 1023px) {
  .platform,
  .platform--tanxunzhe {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.4rem;
  }

  .platform--tanxunzhe .platform__phone {
    order: -1;
  }

  .gallery--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gallery--4 {
    grid-template-columns: minmax(0, 1fr);
  }

  .gallery--4 img {
    height: auto;
    aspect-ratio: 16 / 9;
  }
}