/* css common to frontend AND backend */ /* css common to frontend AND backend */ /* css common to frontend AND backend */

.mag-gallery {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr;
}

.mag-gallery figure {
  width: 100% !important;
  margin: 0 !important;
}

.call-out {
  position: relative;
  padding: 120px 0;
  display: grid !important;
  grid-template-columns: 1fr 2fr;
}

.call-out.alignfull {
  padding: 120px 64px;
}

.call-out .image-column {
  z-index: 2;
}

.call-out:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -40%;
  right: 0;
  width: 100%;
  height: 100%;
  background: #e7d9ed66;
  z-index: 1;
}

.call-out-text {
  position: relative;
  z-index: 2;
}

.call-out .call-out-text h2 {
  --call-out-offset: 10%;

  margin-top: 10%;
  margin-left: 10%;

  padding: 32px;

  text-align: center;
  text-wrap: balance;

  background: #ccc;
}

@media only screen and (max-width: 820px) {
  .mag-gallery {
    grid-template-columns: 1fr 1fr;
  }
}

@media only screen and (max-width: 767px) {
  .mag-gallery {
    grid-template-columns: 1fr;
  }
}