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

.diagnostic-evaluation-container {
  position: relative;
}

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

.spot--spot_16 {
  height: auto;
  width: 300px;
  top: 320px;
  left: -100px;
  transform: rotate(42deg);
}

.spot--spot_17 {
  height: auto;
  width: 378px;
  top: 500px;
  left: 900px;
  transform: rotate(354deg);
}

@media (max-width: 600px) {

  .spot--spot_16 {
    height: auto;
    width: 181px;
    top: 0;
    left: 21px;
  }

  .spot--spot_17 {
    height: auto;
    width: 300px;
    top: 398px;
    left: 137px;
  }
}


/* ========================= Partnering with teachers ========================== */
.Diagnostic-evaluation-matters,
.How-ReadBasix-handles,
.Dont-just-collect-data {
  display: grid;
  margin: 120px 0px 0px;
}


/* ========================= Why diagnostic evaluation matters ========================== */
.Diagnostic-evaluation-matters {
  display: grid;
  grid-template-columns: 1fr;
  gap: 64px;
}

.Diagnostic-evaluation-matters .h4,
.Diagnostic-evaluation-matters .h2 {
  text-align: center;
}

.Diagnostic-evaluation-matters .h4 {
  color: var(--capti-color--brand-green);
}

.Diagnostic-evaluation-matters__text-block {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  text-align: center;
}

.Diagnostic-evaluation-matters__methods {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 30px;
}

@media (max-width: 768px) {

  .Diagnostic-evaluation-matters {
    margin: 80px 0px 0px;
    gap: 20px;
  }

  .Diagnostic-evaluation-matters__methods {
    grid-template-columns: 1fr;
    gap: 24px;
    margin: 0 auto;
  }

  .Diagnostic-evaluation-matters__methods .square-icon.square-icon--92 {
    width: 72px;
    height: 72px;
    min-width: 72px;
    min-height: 72px;
    border-radius: 24px;
  }

  .Diagnostic-evaluation-matters__methods .square-icon.square-icon--92 .square-icon__icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
  }

}

/* ========================= How ReadBasix handles diagnostic assessment ========================== */

.how-readbasix-handles {
  display: grid;
  margin-top: 120px;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "title   image"
    "bullets image";
  gap: 32px 48px;
}

.how-readbasix-handles__title {
  grid-area: title;
  align-self: end;
}

.how-readbasix-handles__text-block {
  grid-area: bullets;
}

.how-readbasix-handles__image {
  grid-area: image;
  border-radius: 24px;
  overflow: hidden;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}


@media (max-width: 767px) {
  .how-readbasix-handles {
    margin-top: 80px;
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "image"
      "bullets";
    gap: 20px;
  }

  .how-readbasix-handles__title {
    text-align: center;
  }

  .how-readbasix-handles__image {
    height: 280px;
  }

  .how-readbasix-handles__image img {
    margin-top: -100px;
  }

}

.how-readbasix-handles__text-block-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 32px;
}

/* ========================= Don’t just collect data — gain clarity and direction for impactful interventions ========================== */

@media (max-width: 768px) {

  .Dont-just-collect-data {
    margin: 80px 0px 0px;
    gap: 20px;
  }
}

.image-title-list__text-block-title {
  align-self: end;
}
