.ParagraphCocktail {
  flex-direction: column;
  background: none;
  position: relative; }
  .ParagraphCocktail::before {
    content: none; }
  @media (min-width: 1366px) {
    .ParagraphCocktail {
      flex-direction: row;
      justify-content: space-between; } }
  .ParagraphCocktail-header {
    text-align: center;
    padding-right: 0;
    margin-bottom: 3rem; }
    @media (min-width: 1366px) {
      .ParagraphCocktail-header {
        width: 380px; } }
    @media (max-width: 767px) {
      .ParagraphCocktail-header {
        margin-bottom: 5rem; } }
  .ParagraphCocktail-surtitle {
    font-family: var(--secondary-font);
    font-weight: bold;
    letter-spacing: 0.07em;
    margin-bottom: 3rem;
    text-align: center; }
  .ParagraphCocktail-title {
    font-size: 3.5rem;
    background: none;
    padding: 0;
    margin-bottom: 3rem;
    text-align: center; }
    @media (max-width: 767px) {
      .ParagraphCocktail-title {
        font-size: 3.5rem; } }
  .ParagraphCocktail-titleWrapper {
    padding-right: 0; }
  .ParagraphCocktail-chapo {
    max-width: 76.8rem;
    margin: 0 auto 3rem; }
  .ParagraphCocktail-cocktails {
    display: flex;
    margin: 0 -4rem;
    padding: 0 3.2rem;
    transform: none;
    width: 100%;
    max-width: 836px; }
    @media (min-width: 1366px) {
      .ParagraphCocktail-cocktails {
        width: calc(100% - 380px - 5rem); } }
    @media (max-width: 767px) {
      .ParagraphCocktail-cocktails {
        margin: 0 calc(-1 * var(--site-padding-mobile));
        width: auto;
        min-width: 100%;
        padding: 0;
        position: relative; }
        .ParagraphCocktail-cocktails::after, .ParagraphCocktail-cocktails::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          bottom: 0;
          width: 5rem;
          background: linear-gradient(to right, var(--body-bg-color), #FFFEF700);
          z-index: 100; }
        .ParagraphCocktail-cocktails::after {
          left: auto;
          right: 0;
          background: linear-gradient(to left, var(--body-bg-color), #FFFEF700); } }
    .ParagraphCocktail-cocktails .swiper-wrapper {
      height: auto; }
      @media (max-width: 767px) {
        .ParagraphCocktail-cocktails .swiper-wrapper {
          padding: 0 5rem; } }
    @media (max-width: 767px) {
      .ParagraphCocktail-cocktails .swiper-container::after, .ParagraphCocktail-cocktails .swiper-container::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 5rem;
        background: linear-gradient(to right, var(--body-bg-color), #FFFEF700);
        z-index: 100; } }
    .ParagraphCocktail-cocktails .NodeCocktail-paragraph {
      width: calc(33.33% - 1.6rem);
      margin: 0 0.8rem 3rem;
      background: transparent;
      text-align: center;
      padding: 0; }
      @media (max-width: 767px) {
        .ParagraphCocktail-cocktails .NodeCocktail-paragraph {
          width: calc(100% - 1.8rem);
          margin: 0 0.9rem 3rem; }
          .ParagraphCocktail-cocktails .NodeCocktail-paragraph.swiper-slide:last-child {
            margin-right: 10rem; } }
      .ParagraphCocktail-cocktails .NodeCocktail-paragraph.swiper-slide {
        margin-bottom: 0; }
      .ParagraphCocktail-cocktails .NodeCocktail-paragraph-cocktail {
        margin-bottom: 1rem;
        overflow: hidden;
        position: relative; }
        .ParagraphCocktail-cocktails .NodeCocktail-paragraph-cocktail::before {
          content: '';
          position: absolute;
          background-color: var(--primary-color);
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          opacity: 0;
          transition: opacity 0.15s ease-in-out 0s; }
        .ParagraphCocktail-cocktails .NodeCocktail-paragraph-cocktail img {
          display: block;
          transform: none;
          transition: transform 5s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
      .ParagraphCocktail-cocktails .NodeCocktail-paragraph-media {
        margin-bottom: 0;
        color: white;
        position: relative;
        border: none;
        overflow: hidden;
        box-shadow: none; }
        .ParagraphCocktail-cocktails .NodeCocktail-paragraph-media img {
          display: block;
          width: 100%;
          height: auto; }
        .ParagraphCocktail-cocktails .NodeCocktail-paragraph-media::after {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          z-index: 2;
          background: var(--green-color);
          opacity: 0;
          transition: opacity 0.5s ease-in-out 0s; }
        .ParagraphCocktail-cocktails .NodeCocktail-paragraph-media .NodeCocktail-paragraph-cta {
          position: absolute;
          left: 50%;
          top: 50%;
          max-width: 100%;
          transform: translate3d(-50%, 30rem, 0) rotate3d(0, 0, 1, -10deg) scale3d(0.8, 0.8, 1);
          transition: transform 0.5s ease-in-out 0s, visibility 0s linear 0.5s;
          visibility: hidden;
          font-family: var(--secondary-font);
          font-size: 5rem;
          font-weight: bold;
          z-index: 3; }
      .ParagraphCocktail-cocktails .NodeCocktail-paragraph-contentWrapper {
        position: relative;
        display: flex;
        flex-direction: column;
        height: 100%; }
        .ParagraphCocktail-cocktails .NodeCocktail-paragraph-contentWrapper:hover .NodeCocktail-paragraph-media, .ParagraphCocktail-cocktails .NodeCocktail-paragraph-contentWrapper:focus .NodeCocktail-paragraph-media {
          margin-bottom: 0;
          border: none;
          box-shadow: none; }
          .ParagraphCocktail-cocktails .NodeCocktail-paragraph-contentWrapper:hover .NodeCocktail-paragraph-media::after, .ParagraphCocktail-cocktails .NodeCocktail-paragraph-contentWrapper:focus .NodeCocktail-paragraph-media::after {
            opacity: 0.25; }
        .ParagraphCocktail-cocktails .NodeCocktail-paragraph-contentWrapper:hover .NodeCocktail-paragraph-cta, .ParagraphCocktail-cocktails .NodeCocktail-paragraph-contentWrapper:focus .NodeCocktail-paragraph-cta {
          transform: none;
          visibility: visible;
          transition-delay: 0s; }
        .ParagraphCocktail-cocktails .NodeCocktail-paragraph-contentWrapper:hover .NodeCocktail-paragraph-cocktail, .ParagraphCocktail-cocktails .NodeCocktail-paragraph-contentWrapper:focus .NodeCocktail-paragraph-cocktail {
          transform: none; }
          .ParagraphCocktail-cocktails .NodeCocktail-paragraph-contentWrapper:hover .NodeCocktail-paragraph-cocktail:before, .ParagraphCocktail-cocktails .NodeCocktail-paragraph-contentWrapper:focus .NodeCocktail-paragraph-cocktail:before {
            opacity: 0.23;
            z-index: 1; }
          .ParagraphCocktail-cocktails .NodeCocktail-paragraph-contentWrapper:hover .NodeCocktail-paragraph-cocktail img, .ParagraphCocktail-cocktails .NodeCocktail-paragraph-contentWrapper:focus .NodeCocktail-paragraph-cocktail img {
            transform: scale(1.2); }
      .ParagraphCocktail-cocktails .NodeCocktail-paragraph-title {
        font-family: var(--secondary-font);
        font-size: 2rem;
        font-weight: 500;
        text-align: center; }
      .ParagraphCocktail-cocktails .NodeCocktail-paragraph .NodeCocktail-paragraph-content {
        flex: 1;
        padding: 0; }
  .ParagraphCocktail .swiper-button-prev,
  .ParagraphCocktail .swiper-button-next {
    bottom: 0;
    top: 0;
    background: var(--body-bg-color);
    width: 4rem;
    height: auto;
    opacity: 1; }
    .ParagraphCocktail .swiper-button-prev::after,
    .ParagraphCocktail .swiper-button-next::after {
      font-size: 2.5rem;
      color: var(--primary-color);
      content: '\f061';
      transition: inherit; }
    @media (max-width: 767px) {
      .ParagraphCocktail .swiper-button-prev,
      .ParagraphCocktail .swiper-button-next {
        background: none;
        z-index: 110; } }
  .ParagraphCocktail .swiper-button-prev {
    left: 0; }
    .ParagraphCocktail .swiper-button-prev::after {
      content: '\f060'; }
  .ParagraphCocktail .swiper-button-disabled::after {
    opacity: 0.3; }

a:hover .NodeCocktail-paragraph-title, a:focus .NodeCocktail-paragraph-title {
  text-decoration: none; }

/*# sourceMappingURL=cocktail.css.map */