.ParagraphCocktail-header {
  text-align: center; }

.ParagraphCocktail-surtitle {
  font-family: var(--secondary-font);
  font-weight: bold;
  letter-spacing: 0.07em; }

.ParagraphCocktail-title {
  font-size: 4rem;
  background: none;
  padding: 0;
  margin-bottom: 3rem; }
  @media (max-width: 767px) {
    .ParagraphCocktail-title {
      font-size: 3rem; } }

.ParagraphCocktail-chapo {
  max-width: 76.8rem;
  margin: -2rem auto 3rem; }

.ParagraphCocktail-cocktails {
  display: flex;
  margin: 0 -4rem;
  padding: 0 1.5rem; }
  @media (max-width: 767px) {
    .ParagraphCocktail-cocktails {
      margin-left: calc(-1 * var(--site-padding-mobile));
      margin-right: calc(-1 * var(--site-padding-mobile));
      padding: 0; } }
  .ParagraphCocktail-cocktails .NodeCocktail-paragraph {
    width: calc(33.33% - 5rem);
    margin: 0 2.5rem 3rem;
    background: white;
    padding: 1rem;
    text-align: center;
    height: auto; }
    @media (max-width: 767px) {
      .ParagraphCocktail-cocktails .NodeCocktail-paragraph {
        width: calc(100% - 6rem);
        margin: 0 3rem 3rem; } }
    .ParagraphCocktail-cocktails .NodeCocktail-paragraph-media {
      margin-bottom: 1.5rem;
      color: white;
      position: relative;
      overflow: hidden; }
      .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: #065000;
        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 {
      display: flex;
      flex-direction: column-reverse; }
      .ParagraphCocktail-cocktails .NodeCocktail-paragraph-contentWrapper:hover .NodeCocktail-paragraph-media::after, .ParagraphCocktail-cocktails .NodeCocktail-paragraph-contentWrapper:focus .NodeCocktail-paragraph-media::after {
        opacity: 0.75; }
      .ParagraphCocktail-cocktails .NodeCocktail-paragraph-contentWrapper:hover .NodeCocktail-paragraph-cta, .ParagraphCocktail-cocktails .NodeCocktail-paragraph-contentWrapper:focus .NodeCocktail-paragraph-cta {
        transform: translate3d(-50%, -50%, 0) rotate3d(0, 0, 1, -10deg) scale3d(1, 1, 1);
        visibility: visible;
        transition-delay: 0s; }
    .ParagraphCocktail-cocktails .NodeCocktail-paragraph-title {
      font-family: var(--secondary-font);
      color: var(--primary-color);
      font-size: 4rem;
      font-weight: 800;
      text-align: center;
      margin: 0; }
      @media (max-width: 767px) {
        .ParagraphCocktail-cocktails .NodeCocktail-paragraph-title {
          font-size: 3rem; } }
    .ParagraphCocktail-cocktails .NodeCocktail-paragraph-chapo {
      font-size: 1.6rem; }

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