@import '{}/imports/client/stylesheets/variables.scss';

#about {

  &>h2 {
    margin: 25px 0;
    padding: 15px 0;
    text-align: center;
  }

  &>.header-divider {
    height: 1px;
    width: 240px;
    margin: -25px auto 0 auto;
    text-align: center;
    background: #007bff;
    opacity: .4;
  }

  section {
    margin-top: 16px;
    margin-bottom: 32px;
    padding: 48px 32px;

    &.second-section {
      background: $gray-lighter;
    }

    @media screen and (max-width: 768px) {
      padding: 20px 0 !important;
      margin: 0 !important;
    }
  }

  .title {
    margin-bottom: 16px;
    font-size: 26px;
  }

  .text-content {

    p {
      margin-bottom: 10px;
    }
  }

  .attachment-content {

    iframe {
      height: 85% !important;
      width: 100% !important;
      min-height: 300px;
    }

    p {
      font-size: .9em;
      font-style: italic;
    }

    @media screen and (max-width: 768px) {
      margin-top: 12px !important;
    }
  }

  @media screen and (max-width: 800px) {
    & {

      .container {

        .row {
          flex-flow: column;

          &>div { // each column
            width: 100%;
            max-width: 100%;
          }

          .attachment-content {
            margin-top: 16px !important;
          }
        }
      }
    }
  }
}

/* Simplify and make more specific */
@media screen and (max-width: 768px) {
  body section.first-section,
  body section.second-section,
  body section.third-section {
    padding-top: 0 !important;
    padding-bottom: 10px !important;
    margin-top: 10px !important;
    margin-bottom: 0 !important;
  }
  
  body section.third-section {
    padding-bottom: 60px !important;
  }
}

/* Remove or update the Discourse-specific styles */
.d-header, .d-header-wrap, .d-content, .d-wrap, body.djs-page {
  #about section,
  #about .first-section,
  #about .second-section,
  #about .third-section,
  section.first-section,
  section.second-section,
  section.third-section {
    padding: 10px 0 !important;
    margin: 10px 0 0 0 !important;
    max-padding: 10px !important;
    min-padding: 10px !important;
  }
}
