@layer layouts {
  /*
   * Info pages (FAQ, About, etc.)
   */
  
  /* Two-column layout */
  .info-two-column {
    display: flex;
    flex-wrap: wrap;
    margin-left: -12px;
    margin-right: -12px;
  
    @media (max-width: 1439.98px) {
      margin-left: -10px;
      margin-right: -10px;
    }
  
    @media (max-width: 991.98px) {
      margin-left: -8px;
      margin-right: -8px;
    }
  }
  
  .info-two-column-title {
    flex: 0 0 auto;
    padding-left: 12px;
    padding-right: 12px;
    width: 50%;
  
    @media (max-width: 1439.98px) {
      padding-left: 10px;
      padding-right: 10px;
    }
  
    @media (max-width: 991.98px) {
      padding-left: 8px;
      padding-right: 8px;
      width: 100%;
    }
  }
  
  .info-two-column-content {
    flex: 0 0 auto;
    padding-left: 12px;
    padding-right: 12px;
    width: 50%;
  
    @media (max-width: 1439.98px) {
      padding-left: 10px;
      padding-right: 10px;
    }
  
    @media (max-width: 991.98px) {
      padding-left: 8px;
      padding-right: 8px;
      width: 100%;
    }
  }
  
  #faq,
  #about {
    .display-1 {
      margin-bottom: 2rem;
    }
  }
  
  .info-group {
    border-bottom: 1px solid var(--color-grey-100);
    padding-bottom: 1rem;
  
    &:last-of-type {
      margin-bottom: 3.75rem;
    }
  
    .info-q,
    .info-a {
      font-size: 1.25rem;
      line-height: 1.5;
      max-width: 35rem;
  
      @media (max-width: 991.98px) {
        font-size: 1.125rem;
      }
  
      @media (max-width: 639.98px) {
        font-size: 1rem;
        line-height: 1.4;
        max-width: 92%;
      }
    }
  
    .info-q {
      color: var(--color-grey-800);
      font-weight: 500;
    }
  }
}