@media (min-width: 1024px) {
  .about,
  .contact {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: #143d2a;
    color: #fff;
  }

  .about::before,
  .contact::before {
    content: "";
    position: absolute;
    z-index: -2;
    pointer-events: none;
    background: url("cooeste-previa-referencia.jpg") no-repeat;
  }

  .about::after,
  .contact::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
  }

.about {
    min-height: 270px;
    padding-block: 42px;
    align-items: center;
    gap: 8%;
  }

  .about::before {
    inset: 0;
    transform: none;
    aspect-ratio: auto;
    background-size: auto max(348.52%, 56.28vw);
    background-position: center 29.81%;
  }

  .about::after {
    background: linear-gradient(90deg, #0c2d20f5, #0c2d20b8 55%, #0c2d20a8);
  }

  .about-copy {
    padding-top: 0;
  }

  .contact {
    min-height: 360px;
    grid-template-columns: minmax(0, 47%) minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-content: center;
    gap: 0;
    padding-block: 38px;
  }

  .contact > div {
    grid-column: 1;
  }

  .contact::before {
    inset: 0 0 0 33%;
    background-size: auto max(306.52%, 72.3vw);
    background-position: right bottom;
  }

  .contact::after {
    background: linear-gradient(90deg, #0c2d20 33%, #0c2d20b0 54%, transparent 78%);
  }

  .about .eyebrow, .contact .eyebrow,
  .about h2 em, .contact h2 em { color: #d9bb72; }

  .about-copy, .about-copy .lead, .about .text-link,
  .contact p, .contact h3 { color: #f7f7f0; }
}



@media (max-width: 600px) { .hero .button.gold > span[aria-hidden="true"] { display: none; } }