.m-cards {
  @media (max-width: 767px) {
    overflow-x: clip;
  }

  .m-cards__loop {
    margin-top: 64px;

    @media (max-width: 767px) {
      margin-top: 32px;
    }

    .row > [class*="col-"] {
      min-width: 0;
    }

    @media (max-width: 1200px) {
      .row > [class*="col-"] {
        flex: 0 0 50%;
        max-width: 50%;
      }

      .row > [class*="col-"]:nth-child(3) {
        flex: 0 0 100%;
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
      }
    }

    &.m-cards__loop--wrap {
      @media (min-width: 1201px) {
        .row > [class*="col-"] {
          flex: 0 0 33.333%;
          max-width: 33.333%;
        }
      }

      @media (min-width: 768px) and (max-width: 1200px) {
        .row > [class*="col-"]:nth-child(3) {
          flex: 0 0 50%;
          max-width: 50%;
          margin-left: 0;
          margin-right: 0;
        }
      }
    }

    @media (max-width: 767px) {
      margin-right: calc(50% - 50vw);

      .row {
        flex-wrap: nowrap;
        justify-content: flex-start !important;
        column-gap: 16px;
        margin-left: 0;
        margin-right: 0;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        cursor: grab;

        &::-webkit-scrollbar {
          display: none;
        }
      }

      .row > [class*="col-"],
      .row > [class*="col-"]:nth-child(3) {
        flex: 0 0 82%;
        max-width: 82%;
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
        scroll-snap-align: start;
      }
    }
  }

  .m-cards__titre {
    font-family: var(--wp--preset--font-family--primary);
    color: var(--wp--preset--color--secondary);
    font-size: 32px;
    font-weight: var(--wp--custom--font-weight--semi-bold);
    margin: 0 0 16px;

    @media (max-width: 767px) {
      text-align: left !important;
    }
  }

  .m-cards__sous-titre {
    font-family: var(--wp--preset--font-family--primary);
    color: var(--wp--preset--color--secondary);
    font-size: 22px;
    margin: 0 0 16px;

    @media (max-width: 767px) {
      text-align: left !important;
    }
  }

  .m-cards__texte {
    color: var(--wp--preset--color--secondary);
    font-size: 16px;
    margin: 0;

    @media (max-width: 767px) {
      text-align: left !important;
    }

    p {
      margin-bottom: 0;
    }
  }

  .m-cards__bouton {
    margin-top: 40px;
  }
}

.card-valeurs {
  border: none;
  border-radius: 16px;
  background-color: var(--wp--preset--color--cream);
  padding: 24px;
  height: 100%;
  display: flex;
  flex-direction: column;

  @media (max-width: 767px) {
    min-height: 320px;
  }

  .card-valeurs__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 42px;
  }

  .card-valeurs__header--sans-image {
    margin-bottom: 89px;
  }

  .card-valeurs__titre {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: break-word;
    font-family: var(--wp--preset--font-family--primary);
    color: #411C09;
    font-size: 22px;
    font-weight: var(--wp--custom--font-weight--semi-bold);
    margin: 0;
    line-height: 28px;
    /* Words cut with a hyphen ("proxi-mité") rather than anywhere. */
    hyphens: auto;
  }

  .card-valeurs__image {
    flex: 0 0 130px;
    width: 130px;
    height: 130px;

    @media (max-width: 767px) {
      flex-basis: 96px;
      width: 96px;
      height: 96px;
    }

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 12px;
      display: block;
      pointer-events: none;
    }
  }

  .card-body {
    padding: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    @media (max-width: 767px) {
      justify-content: flex-start;
    }
  }

  .card-valeurs__texte {
    font-size: 16px;
    line-height: 24px;
    color: #411C09;
    margin: 0;
    letter-spacing: 0.15px;
  }
}