/*---------------------- eight-panel start ----------------------*/

.eight-panel-header {
  margin-bottom: 2rem;
}

.eight-panel-header .eph-title strong {
  color: #9c3587;
  color: var(--purple-brite);
}

.eight-panel-header .eph-subtitle {
  color: #9c3587;
  color: var(--purple-brite);
}

.eight-panel .b-text .title {
  margin-bottom: 0.5rem;
}

.eight-panel .block-grid .block.graphic::before {
  float: left;
  padding-top: 100%;
  content: '';
}

.eight-panel .block-grid .block.graphic::after {
  display: block;
  content: '';
  clear: both;
}

.eight-panel .block-grid .block.graphic .wrapper {
  padding: 2rem;
  display: block;
  width: 100%;
  margin: 0;
}

.eight-panel .block-grid .block.graphic img {
  max-width: 100%;
  width: 100%;
}

.eight-panel .block-grid .el--6 {
  grid-row: 5;
}

.eight-panel .block-grid .el--8 {
  grid-row: 7;
}

@media only screen and (min-width: 576px) {
  .eight-panel .block-grid {
    grid-template-columns: 100%;
  }
}

@media only screen and (min-width: 768px) {
  .eight-panel .block-grid {
    grid-template-columns: repeat(2, 50%);
  }

  .eight-panel .block-grid .el--6 {
    grid-row: initial;
  }
  .eight-panel .block-grid .el--8 {
    grid-row: initial;
  }
}

@media only screen and (min-width: 1200px) {
  .eight-panel .block-grid {
    grid-template-columns: repeat(4, 25%);
  }
}

/*---------------------- eight-panel end ----------------------*/