/*---------------------- Stat Blocks start ----------------------*/

.tri-blocks header {
  margin-bottom: 3.5rem;
}

.tri-blocks header h3 {
  color: #9c3587;
  color: var(--purple-brite);
  margin-bottom: 1.7rem;
}

.tri-blocks-wrap {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.tri-block.large,
.tri-block.multi {
  padding: 2rem;
  display: grid;
  grid-template-columns: 100%;
  align-items: center;
  grid-gap: 2rem;
  gap: 2rem;
}

.tri-block.large .block-graphic,
.tri-block.multi .block-graphic {
  max-width: 100%;
}


.tri-block.multi .block-info {
  display: grid;
  grid-template-columns: 100%;
  grid-gap: 1rem;
  gap: 1rem;
}



.tri-blocks .tri-block img {
  width: 100%;
}

.tri-block .head,
.tri-block .info {
  color: white;
}

.tri-block.large .head {
  font-size: 3.5rem;
  font-weight: bold;
  line-height: 0.9;
  margin-bottom: 2.25rem;
}

.tri-block.large .info {
  font-size: clamp(1.33rem, 2vw, 1.55rem);
  font-size: var(--ts-h4);
  font-weight: 500;
  line-height: 1.17;
}

.tri-block.multi .head {
  font-size: 2.83rem;
  font-weight: bold;
}

.tri-block.multi .info {
  font-size: clamp(1.22rem, 1.5vw, 1.33rem);
  font-size: var(--ts-h5);
  font-weight: 500;
  line-height: 1.2;
}

.tri-block.graphic-only {
  padding: 3rem;
}

@media only screen and (min-width: 576px) {
  .tri-block.multi .block-info {
    grid-template-columns: repeat(2, 40%);
    justify-content: space-between;
  }
  
  .tri-block.large .block-graphic,
  .tri-block.multi .block-graphic {
    max-width: 14rem;
  }
}

@media only screen and (min-width: 860px) {
  .tri-block.multi .block-info {
    grid-template-columns: repeat(2, 45%);
  }

}

@media only screen and (min-width: 992px) {
  .tri-block.multi,
  .tri-block.large {
    grid-template-columns: 35% auto;
  }

  .tri-blocks .tri-block {
    padding: 3rem;
    gap: 4rem;
    grid-template-columns: 30% auto;
  }

  .tri-block.multi .block-info {
    grid-template-columns: repeat(2, 45%);
  }
  .tri-block.large .block-graphic,
  .tri-block.multi .block-graphic {
    max-width: none;
  }
}

@media only screen and (min-width: 1200px) {
  .tri-block.multi .block-info {
    grid-template-columns: repeat(3, 30%);
  }
}
/*---------------------- stat blocks end ----------------------*/