/*---------------------- four-panel start ----------------------*/

.four-panel.block-grid .image::before {
  float: left;
  padding-top: 75%;
  content: "";
}

.four-panel.block-grid .image::after {
  display: block;
  content: "";
  clear: both;
}

.four-panel.block-grid .el--3 {
  grid-row: 4;
}

/** col text **/

.four-panel .col-text li {
  margin-left: 1rem;
  margin-bottom: 1rem;
}

.four-panel .col-text li {
  list-style: disc;
  padding-left: 0.3rem;
}

.four-panel .col-text li::marker {
  font-size: 11px;
}

.four-panel .balCol {
  width: 100%;
  margin-bottom: 1rem;
}

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

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

  .four-panel.block-grid .image::before {
    float: left;
    padding-top: 75%;
    content: "";
  }
  .four-panel.block-grid .image::after {
    display: block;
    content: "";
    clear: both;
  }

  .four-panel.block-grid .el--1 {
    grid-column: span 2;
  }
  .four-panel.block-grid .el--4 {
    grid-column: span 2;
  }
  .four-panel.block-grid .el--3 {
    grid-row: 2;
  }
}

@media only screen and (min-width: 992px) {
  .four-panel .col-text {
    -moz-columns: 2 auto;
    columns: 2 auto;
  }
}

/*---------------------- four-panel end ----------------------*/