//--- GENERIC
.sections {
}

//--- LANDINGPAGE
//--- TEASERLIST
.sections-landingpage-teaserlist {
  .advertisement-RECO {
    border-bottom: 1px solid $color-line-secondary;
    padding-bottom: 1.25rem;

    @media (min-width: $break-lg) {
      border-bottom: 0;
    }
  }
    .menu-container {
      padding-top: 15px;
      padding-bottom: 15px;
      margin-bottom: 60px;
      border-top: 1px solid $color-line-tertiary;
      border-bottom: 1px solid $color-line-secondary;
      white-space: nowrap;
      overflow-x: auto;
    }
}
//--- NEWSLETTERFORM
.sections-landingpage-newsletterform {
  .section-content {
    &:before {
      border-top: 1px solid $color-line-secondary;
      display: block;
      content: '';
    }

    &:after {
      border-bottom: 1px solid $color-line-secondary;
      display: block;
      content: '';
    }
  }
}

//--- SEPARATOR
.sections-landingpage-separator {
  .separate {
    border-top: 1px solid $color-line-secondary;
  }
}

//--- IMAGESERVICE
.sections-landingpage-imageservice{
  .slick-prev {
    left: 25px;
  }

  .slick-next {
    right: 35px;
  }

  .slick-prev,
  .slick-next {
    top: 50%;
  }
}

.sections-landingpage-areaheading {
  .areaheading{
    h2{
      margin: 0 1rem;
    }
  }
}

/* The design of the product teaser of the landing page is here as its only valid in the context of a landing page list */
.sections-landingpage-productlist {

  .disclaimer {
    text-align: right;
    position: relative;
    font: 11px/16px $font-family-secondary;
    color: $color-muted-primary;

    @media (min-width: $break-sm) {
      width: 50%;
      margin-left: auto;
    }
  }

  .components-teaser.components-teaser-product {

    padding: 0.75rem;

    // Sticker
    &.sticker-shoppingweek {
      .card-img-wrapper {
        &:after {
          background-size: 60px auto;
          width: 60px;
        }
      }
    }

    .card {
      border: none;
      /* Overrides the standard padding */
      padding: 0;
    }
    /* Rotated to save space on the teaser*/
    .copyright {
      mix-blend-mode: difference;
      transform: rotate(-90deg);
      bottom: 5%;
      position: absolute;
      display: block;
      width: fit-content;
      left: 100%;
      transform-origin: bottom left;
    }

    /* Different position on mobile and desktop */
    .card-img-wrapper {
      margin-bottom: 5px;
    }

    .card-body {
      font-size: 14px/18px;

      .card-kicker {
        margin-bottom: 10px;
      }

      .card-title {
        font-size: 18px;
        line-height: 22px;
      }

      /* The brand should be as visible as the title, just not bold */
      .card-product-manufacturer {
        font-size: 18px;
        line-height: 22px;
        font-style: italic;
        margin: 0.75rem 0 .25rem 0;
      }

      .card-product {
        margin-bottom: 17px;

        /* The separator disappears on mobile and servers as a line break */
        @media (max-width: $break-md) {
          & > span {
            display: block;
            &:after {
              display: none;
            }
          }
        }
      }

    }

  }
}