@layer sections {
  #sobre {
    position: relative;
    overflow: hidden;
    background:
      repeating-linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.03) 0 2px,
        transparent 2px 18px
      ),
      repeating-linear-gradient(
        -135deg,
        rgba(195, 78, 36, 0.08) 0 1px,
        transparent 1px 22px
      ),
      linear-gradient(145deg, #2f1a10 0%, #1a120d 45%, #070707 100%);
  }

  #sobre .card {
    position: relative;
    padding: clamp(22px, 4vw, 38px);
    border-radius: 18px;
    border: 1px solid rgba(235, 212, 65, 0.35);
    background: rgba(20, 13, 10, 0.62);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.35);
  }

  #sobre .card::before {
    content: "";
    position: absolute;
    inset: 10px;
    pointer-events: none;
    border-radius: 12px;
    background:
      repeating-linear-gradient(
          90deg,
          rgba(235, 212, 65, 0.65) 0 14px,
          transparent 14px 26px
        )
        top / calc(100% - 16px) 2px no-repeat,
      repeating-linear-gradient(
          90deg,
          rgba(235, 212, 65, 0.65) 0 14px,
          transparent 14px 26px
        )
        bottom / calc(100% - 16px) 2px no-repeat,
      repeating-linear-gradient(
          180deg,
          rgba(235, 212, 65, 0.65) 0 14px,
          transparent 14px 26px
        )
        left / 2px calc(100% - 16px) no-repeat,
      repeating-linear-gradient(
          180deg,
          rgba(235, 212, 65, 0.65) 0 14px,
          transparent 14px 26px
        )
        right / 2px calc(100% - 16px) no-repeat;
  }

  .legado {
    text-align: justify;
  }

  .conclusao {
    text-align: center;
  }

  .legado p,
  .conclusao p {
    margin: 0;
    font-size: 1rem;
    font-family: system-ui, sans-serif;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    color: var(--cream);
  }

  .legado p {
    line-height: 1.75;
  }

  .conclusao p {
    line-height: 1.6;
  }
}