@layer components {
  .pillars { background: var(--concreto); padding-block: var(--section-y); }

  .pillars__blocks {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem 3rem;
    align-content: start;
  }

  .pillar {
    padding-left: 1.25rem;
    border-left: 3px solid var(--petroleo);
  }
  .pillar__title { font-size: var(--fs-1); margin-bottom: 0.75rem; }
  .pillar p { font-size: 1rem; }
  .pillar strong { color: var(--petroleo); font-weight: 600; }

  .pillars__photo { min-height: 22rem; margin-bottom: 2.5rem; }

  /* Retícula de líneas finas sobre la foto. */
  .pillars__grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    color: rgb(255 255 255 / .22);
    pointer-events: none;
  }

  @media (min-width: 60rem) {
    .pillars__photo {
      grid-column: 1 / span 5;
      margin: 0 0 0 calc(var(--gutter) * -1);
      min-height: 100%;
    }
    .pillars__blocks {
      grid-column: 7 / span 6;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      align-self: center;
    }
  }
}