drupal-erable/web/themes/erabletheme/scss/_home.scss

.home_introduction {
  background-color: white;
  width: 100%;
  box-sizing: border-box;
  padding: 3rem 1rem;
  margin: 2rem 0;
  h2 {
    display: none;
  }
  > .logo {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-bottom: 2rem;
    img {
      width: 50%;
      height: auto;
      @media (min-width: $breakpoint_desktop) {
          width: 100%;
      }
    }
    @media (min-width: $breakpoint_desktop) {
      width: 170%;
      margin: 0 3rem;
    }
  }
  article > div {
    height: unset !important;
    min-height: 100%;
    p {
      @include main_text_content();
      width: 100%;
      @media (min-width: $breakpoint_tablet) {
        padding-left: 3rem;
        padding-right: 3rem;
      }
      @media (min-width: $breakpoint_desktop) {
        padding-left: 0;
      }
    }
    @media (min-width: $breakpoint_tablet) {
      padding: 0 !important;
    }
  }
  div.more-link {
    margin-top: 3rem;
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    @include fluo_button();
    @media (min-width: $breakpoint_tablet) {
      position: absolute;
      left:0;
      right:0;
    }
  }
  @media (min-width: $breakpoint_tablet) {
    padding: 8rem 1rem;
    padding-top: 4rem;
    margin: 6rem 0;
    margin-left: 20vw;
    margin-right: 20vw;
    width: calc(100% - 40vw);
  }
  @media (min-width: $breakpoint_desktop) {
    display: flex;
    justify-content: space-around;
    margin-top: 20vh;
    margin-bottom: 20vh !important;
  }
}

// plus sur l'accueil
.home_consultation {
    position: relative;
    width: 100%;
    padding: 4rem 0;
    @include beige_gradient();
    h2 {
      margin-bottom: 1.2rem;
      @include main_title();
      @media (min-width: $breakpoint_tablet) {
          padding-left: 0 !important;
      }
      @media (min-width: $breakpoint_desktop) {
          margin-left: 12.5vw;
          max-width: 50vw;
      }
    }
    h2 + div {
        h2, h3, h4 {
            @include sous_titre_alt();
            @media (min-width: $breakpoint_desktop) {
                max-width: 50vw;
                margin-left: 12.5vw;
            }
        }
    }
    article > div {
        height: unset !important;
        p {
          @include main_text_content();
          @media (min-width: $breakpoint_desktop) {
              margin-left: 12.5vw;
              max-width: 50vw;
          }
        }
        @media (min-width: $breakpoint_tablet) {
            padding: 0 !important;
        }
    }
    div.more-link {
        @include fluo_button();
        margin-top: 3rem;
        display: flex;
        justify-content: center;
        align-items: center;
        @media (min-width: $breakpoint_desktop) {
            display: flex;
            justify-content: flex-end;
        }
    }
    @media (min-width: $breakpoint_tablet) {
        padding-left: 12.5vw;
        padding-right: 12.5vw;
    }
}

.map-projets {
  background-color: white;
  padding: 1rem 0;
  margin-left: $x_margin;
  width: calc(100% - #{$x_margin} * 2);
  @media (min-width: $breakpoint_tablet) {
    margin-left: 20vw;
    width: calc(100% - 40vw);
  }
  @media (min-width: $breakpoint_desktop) {
    margin-left: 25vw;
    width: calc(100% - 50vw);
    margin-top: 10vh;
    margin-bottom: 10vh;
  }
  > h2 {
    @include main_title();
  }
  > .projets_intro {
    padding: 0 3vw;
    margin-top: 1.3rem;
    margin-bottom: 6vh;
    @include main_text_content();
    @media screen and (min-width: $breakpoint_tablet) {
      margin-top: 2vh;
    }
    h1, h2, h3,
    h4, h5, h6 {
      @include sous_titre_alt();
    }
    a {
      color: black;
    }
    > p {
      margin: 1rem 0;
    }
  }
  > #sites-map-container {
    margin: 0 2rem;
    width: calc(100% - 4rem);
    #popup {
      h3 {
        @include sous_titre();
      }
      p {
        @include main_text_content();
      }
    }
  }
}