/**
 * Manter as estilizações dentro da classe page-template-page-sites
 * para evitar conflito com outras páginas do Portal.
 */
 .html-sites {
  overflow-x: hidden !important;
}

.page-template-page-sites {
  overflow-x: hidden !important;

  p,
  h2,
  .wp-block-create-block-plugin-sesc-bloco-paragrafo {
    display: inline-block;
    margin: 0 40px !important;
    max-width: 1088px;

    @media (min-width: 768px) and (max-width: 1279px) {
      margin: 0 60px !important;
    }

    @media (min-width: 1280px) {
      margin: 0 auto !important;
      width: 100%;
    }
  }

  .wp-block-columns {
    .wp-block-column {
      p,h2 {
        @media (min-width: 768px) {
          margin: 0 !important;
        }
      }

      .wp-block-list {
        li {
          margin: 0 58px;

          @media (min-width: 768px) {
            margin: 0 0 0 18px;
          }
        }
      }
    }

    @media (min-width: 768px) {
      &.has-background {
        padding-left: 0;
        padding-right: 0;
      }
    }

    @media (max-width: 767px) {
      .wp-block-column p.has-background,
      .wp-block-column h2.has-background {
        padding-left: 40px;
        padding-right: 40px;
      }

      .wp-block-column.has-background {
        padding-left: 40px;
        padding-right: 40px;

        p,h2 {
          padding-left: 0 !important;
          padding-right: 0 !important;
        }
      }

      &.has-background {
        .wp-block-column, 
        .wp-block-column.has-background {
          padding-left: 0;
          padding-right: 0;
        }

        p,h2 {
          padding-left: 0 !important;
          padding-right: 0 !important;
        }
      }
    }
  }

  p.has-background,
  h1.has-background,
  h2.has-background,
  h3.has-background,
  h4.has-background,
  h5.has-background,
  h6.has-background {
    padding-left: 0;
    padding-right: 0;
  }

  .react-datepicker__current-month {
    display: block;
  }

  > .wp-block-columns {
    width: 100%;
    max-width: 1088px;
    margin-left: auto;
    margin-right: auto;

    &.has-background {
      position: relative;

      &::before,
      &::after  {
        content: "";
        width: 100%;
        height: 100%;
        background-color: inherit;
        position: absolute;
        top: 0;
      }

      &::before {
        left: 100%;
      }

      &::after {
        right: 100%;
      }
    }
  }

  @media (max-width: 992px) {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: auto 1fr auto;
  }

  #wpadminbar {
    position: static !important;
    order: -1;
  }

  iframe {
    @media (max-width: 768px) {
      width: 100%;
      margin: 0 auto;
      display: flex;
    }
  }
}