.with-gradient {
  background: linear-gradient(
    0deg,
    rgba(215, 232, 255, 1) 0%,
    rgba(255, 255, 255, 1) 50%
  );
}

.social-media-logo {
  display: inline-block;
  margin-right: 1em;

  img {
    width: 50px;
  }
}

.tgv {
  width: 50vw;
  position: relative;
  height: 0;
  bottom: 17px;
  margin: 0 0 0 auto;
  img {
    width: 100%;
  }
}

.producteurs-content .presentation-icon {
  text-align: center;
  font-size: 3em;
}

.producteurs-presentation {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: -24px;
  > div {
    flex-basis: 300px;
    max-width: calc(50% - 48px);
    flex-grow: 1;
    padding: 24px;
    margin: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  @include tablet {
    flex-direction: column;
    align-items: center;
    margin: -12px;
    > div {
      margin: 12px;
      padding: 12px;
      max-width: 450px;
    }
  }
  .presentation-action {
    flex-grow: 0;
    align-self: center;
  }
}

.section-why {
  background-image: url('/images/producteurs/chariot-donnees.svg');
  background-repeat: no-repeat;
  background-position: bottom 10px left 20px;
  background-size: 15%;
  padding-bottom: 96px;
  @media (max-width: $breakpoint-tablet) {
    background-size: 50%;
  }
  @media (min-width: $breakpoint-tablet) and (max-width: $breakpoint-desktop) {
    background-size: 30%;
  }
  &.no-bg {
    background: none;
    padding-bottom: 0;
  }
  .section-why-body {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: stretch;
    > div {
      flex-basis: 90%;
      max-width: 500px;
      flex-grow: 0;
      text-align: left;
      display: flex;
      align-items: flex-start;
      flex-wrap: wrap;
      justify-content: space-around;
      .why-section-picto {
        flex-basis: 96px;
        flex-grow: 1;
        max-width: 96px;
        img {
          width: 100%;
        }
      }
      .why-section-text {
        padding-left: 24px;
        flex-basis: 300px;
        min-width: 250px;
        flex-grow: 2;
      }
    }
    .panel {
      margin: 0 0 24px;
    }
  }
}

.producteurs-section {
  h1 {
    font-size: 2.5em;
  }
  @media (max-width: $breakpoint-tablet) {
    h1 {
      font-size: 2em;
    }
  }
  h2 {
    font-size: 1.5em;
  }
  .producteurs-top {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    padding-bottom: 0;

    .panel-producteurs {
      border-left: 5px solid var(--theme-primary);
      padding: 24px;
      flex-basis: 250px;
      flex-grow: 1;
      h2 {
        text-align: left;
      }
      &.signed-in {
        border-left: 5px solid var(--primary-color-producer);
        .button {
          background-color: var(--primary-color-producer);
        }
      }
    }
    .producteurs-title {
      padding-right: 48px;
      flex-basis: 50%;
    }
  }
  .input__group {
    flex-wrap: wrap;
    input {
      margin-right: 12px;
    }
  }
  #mc-embedded-subscribe {
    margin-left: 0 !important;
  }
}

.section {
  .producteurs-community {
    display: flex;
    align-items: flex-start;
    justify-content: space-around;
    flex-wrap: wrap;
    .producteurs-community-child {
      flex-basis: 35%;
      text-align: left;
    }
  }
  @media (max-width: 1250px) {
    .producteurs-community {
      flex-direction: column;
      align-items: center;
      div {
        text-align: center;
      }
      .input__group {
        justify-content: center;
      }
    }
  }
}

.breadcrumbs {
  display: flex;

  .breadcrumbs-element {
    list-style: none;
    padding-right: 0.5em;
    color: var(--dark-grey);
    a {
      color: var(--dark-grey);
    }
  }
  .breadcrumbs-element + .breadcrumbs-element {
    &::before {
      content: '>';
      padding-right: 0.5em;
    }
  }
}
