drupal-erable/web/themes/erabletheme/scss/partials/_carousel.scss

.carousel_container {
  @media screen and (min-width: $breakpoint_tablet) {
    width: 100%;
    overflow-x: hidden;
  }
  .slick-container {
      width: 100%;
      margin-bottom: 5rem;
      @media screen and (min-width: $breakpoint_tablet) {
        width: 200vw;
        transform: translateX(-50vw);
      }
      div.views-row {
          padding: 0 3vw;
          @media screen and (min-width: $breakpoint_tablet) {
              padding: 0 6vw;
          }
        > article {
          width: 100%;
          > div:first-of-type { // container du lien image
              overflow-y: hidden;
              padding: 0 !important;
              display: flex;
              align-items: center;
              > div {
                  width: 100%;
                  > a {
                      max-width: 100%;
                      img {
                          width: 100%;
                          height: auto;
                      }
                  }
              }
          }
          @media (min-width: $breakpoint_tablet) {
              .preview_meta {
                  margin-left: 0;
                  margin-right: 0;
              }
              h2, .preview_sous_titre {
                  padding-left: 0;
                  padding-right: 0;
              }
          }
        }
      }
      .slick-arrow {
          width: 1.5rem;
          height: 1.5rem;
          border-radius: 1.5rem;
          background-color: $teal !important;
          transition: background-color 0.3s ease;
          top: unset !important;
          bottom: calc(-25px - 4rem);
          @media (min-width: $breakpoint_tablet) {
            width: 2rem;
            height: 2rem;
            bottom: calc(-25px - 6rem);
          }
          &:hover {
            background-color: white !important;
            &::before {
              color: $teal;
            }
          }
          &::before {
            opacity: 1 !important;
            color: white;
            font-weight: bold;
            font-family: 'Marianne', sans-serif;
            display: block;
            font-size: $sm_font_size !important;
            @media (min-width: $breakpoint_tablet) {
              font-size: $l_font_size !important;
            }
          }
      }
      .slick-prev {
        left: 20vw;
        @media (min-width: $breakpoint_tablet) {
          left: calc(50vw + 35vw);
        }
      }
      .slick-next {
        right: 20vw;
        @media (min-width: $breakpoint_tablet) {
          right: calc(50vw + 35vw);
        }
      }
      > div > div > div:first-of-type {
        z-index: 2;
        position: relative;
        margin-bottom: 4rem;
        @media (min-width: $breakpoint_tablet) {
          margin-bottom: 6rem;
        }
      }
      #carousel_dots {
        z-index: 1;
        position: relative;
        margin-top: -15px;
        ul {
            position: relative;
            bottom: 0;
            li.slick-active button::before{
                color: $teal;
            }
            li button::before{
                color: rgba(0.9, 0.9, 0.9, 1);
            }
        }
      }
      footer {
          @include fluo_button();
          text-align: center;
          margin-top: 4rem;
          margin-bottom: 4rem;
      }
  }
}