@import '../../page-part/hero.css';

/* ========================= spots ========================== */

.inform-mtss-container {
  position: relative;
}

.spot {
  position: absolute;
  z-index: -1;
}

.spot--spot_01 {
  height: auto;
  width: 480px;
  top: -260px;
  left: 700px;
}

@media (max-width: 600px) {

  .spot--spot_01 {
    width: 300px;
    top: -118px;
    left: -120px;
  }
}


/* ========================= Page ========================== */

.Key-components,
.Benchmark-testing,
.Diagnostic-evaluation,
.Progress-monitoring,
.Lexile-measurement {
  display: grid;
  margin: 120px 0px 0px;
}



.page-empowering-schools__block {
  padding: 20px;
  font-family: var(--capti-typography--body-font-family);
}

/* ========================= Key components of an effective RTI/MTSS strategy ========================== */

.Key-components {
  grid-template-columns: 1fr;
  gap: 40px;
  margin: 160px 0px 0px;
}

.Key-components>.h2 {
  text-align: center;
}

.Key-components__content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
}

.Key-components__text-block {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.Key-components__text-block-title {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.Key-components__text-block-title .h2 {
  text-decoration: underline;
}

.Key-components__text-block-list {
  padding: 0px;
}

@media (max-width: 768px) {
  .section-description-container--mtss {
    text-align: center;
  }
}


/* ========================= Universal-screening ========================== */
.Universal-screening {
  margin: 40px 0px 0px;
}

/* ========================= Why an integrated approach matters ========================== */

.Why-matter {
  display: grid;
  gap: 80px;
  margin: 120px 0px 0px;
}

.Why-matter__text-block {
  display: flex;
  flex-direction: column;
  gap: 32px;
  text-align: center;
}

.Why-matter__bullet-points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 32px;
}

@media (max-width: 768px) {
  .Why-matter__bullet-points {
    gap: 16px;
  }
}

.Why-matter__bullet-point {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 352px;
}

.Why-matter__bullet-point-square-icon {
  width: 92px;
  height: 92px;
  min-width: 92px;
  min-height: 92px;
  border-radius: 24px;
}

.Why-matter__bullet-point-square-icon .square-icon__icon {
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
}

.Why-matter__bullet-point p {
  text-align: center;
}

@media (max-width: 768px) {
  .Why-matter {
    margin: 80px 0px 0px;
    gap: 16px;
  }

  .Why-matter__bullet-point,
  .Why-matter .vertical-bullet-points-row__text-block,
  .Why-matter .vertical-bullet-points-row__methods {
    gap: 16px;
  }

  .Why-matter__bullet-point,
  .Why-matter .bullet-point-vertical {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    max-width: 652px;
  }

  .Why-matter__bullet-point p {
    text-align: left;
  }

  .Why-matter__bullet-point-square-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    border-radius: 8px;
  }

  .Why-matter__bullet-point-square-icon .square-icon__icon {
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
  }
}

.Why-matter__text-block {
  display: flex;
  flex-direction: column;
  gap: 32px;
  text-align: center;
}

.Why-matter__methods {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 32px;
}

/* ========================= Transform your RTI/MTSS implementation today ========================== */

.Transform-your-rti.ready-to-make-a-difference {
  grid-template-columns: 1.5fr 1fr;
}

@media (max-width: 768px) {
  .Transform-your-rti.ready-to-make-a-difference {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {

  .Key-components,
  .Universal-screening,
  .Benchmark-testing,
  .Diagnostic-evaluation,
  .Progress-monitoring,
  .Lexile-measurement {
    margin: 80px 0px 0px;
  }
}
