.m-boucle-annonce {
  overflow: hidden;

  .m-boucle-annonce__titre {
    margin: 0;

    @media(width < 768px) {
      text-align: center;
    }
  }

  .m-boucle-annonce__texte {
    @media(width < 768px) {
      text-align: center;
    }
  }

  .col-navigation {
    z-index: 0;
    position: relative;
  }

  .m-boucle-annonce__loop {
    margin-top: 1rem;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 60px;
    opacity: 0;
    transition: opacity 0.3s;

    &.swiper-initialized {
      opacity: 1;
    }

    @media(width < 991px) {
      margin-bottom: 2rem;
      padding-bottom: 14px;
      padding-left: 8px;
      padding-right: 8px;

      .col-navigation {
        max-width: 100px;
        margin: 1em auto 0;
      }
    }

    .swiper-slide {
      max-width: 570px;
      height: auto;
      padding: 8px 0;

      @media(width < 768px) {
        max-width: 330px;
      }
    }
  }

  /* style second */

  &.is-style-second {
    background-color: var(--wp--preset--color--secondary);
    position: relative;
    padding: var(--wp--preset--spacing--xx-large) 0;

    @media(width < 991px) {
      background-color: #fff;
      padding: 0 0 var(--wp--preset--spacing--x-large);
    }

    &:after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      width: 45vw;
      background-color: rgba(255, 255, 255, 1);
      z-index: 2;

      @media(width < 991px) {
        display: none;
      }
    }

    .col-texte {
      position: relative;


      .col-texte-wrap {
        position: relative;
        z-index: 3;

        .m-boucle-annonce__titre {
          @media(width < 991px) {
            text-align: left;
          }
        }

        .m-boucle-annonce__texte {
          @media(width < 991px) {
            text-align: left;
          }
        }

      }
    }

    .m-boucle-annonce__loop__second {
      padding-left: 120px;
      padding-right: 0;
      padding-bottom: 60px;
      overflow: inherit;
      opacity: 0;
      transition: opacity 0.3s;

      @media(width < 991px) {
        padding-left: 0;
        padding-top: 2rem;
        padding-bottom: 2em;
      }

      &.swiper-initialized {
        opacity: 1;
      }

      .swiper-slide {
        transition: opacity 0.3s;
        height: auto;

        @media(width < 768px) {
          max-width: 330px;
        }
      }

      .swiper-slide-prev {
        opacity: 0.5;
      }

    }

    .col-navigation {
      width: 88px;
      height: 15px;
      margin-left: auto;

      @media(width < 991px) {
        margin-left: auto;
        margin-right: auto;
      }

      .swiper-button-next,
      .swiper-button-prev {
        width: 34px;
        height: 15px;
        top: 0;
      }

      .swiper-button-prev {
        left: 0 !important;
      }

      .swiper-button-next {
        right: 0 !important;
      }
    }
  }
}