{% module_attribute "benefits" type="group" label="Cards bénéfices" repeater="true" %}
{% module_attribute "icon" type="image" label="Icône" %}
{% module_attribute "title" type="text" label="Titre" %}
{% module_attribute "description" type="richtext" label="Description" %}
{% end_module_attribute %}
{% module_attribute "card_bg" type="color" label="Couleur des cards" default="#ffffff" %}
{% module_attribute "title_color" type="color" label="Couleur des titres" default="#032D32" %}


.container_benefits {
  background-image: url("https://20088022.fs1.hubspotusercontent-na1.net/hubfs/20088022/bg_benefits_lp_weoc.jpg");
  
  background-size: cover;
  background-position: bottom;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 80px 200px;
  gap: 35px;  
}


.cards_benefits {
background-color: ;
}


.title_benefits h3,
.cards_benefits p {
color: ;
}

    .container_benefits > h2 {
      font-size: 36px;
      line-height: 40px;
    }

    .content_benefits {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        gap: 20px;
        justify-content: center;
    }

    .cards_benefits {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        background-color: #fff;
        border-radius: 20px;
        padding: 20px;
        width: 32%;
        min-height: 330px;
        gap: 15px;
    }

    .title_benefits {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 10px;
        width: max-content;
        height: auto;
        width: 280px;
    }

    .img_icon_benefits {
        width: 92px;
    }

    .title_benefits > h3 {
        font-size: 24px;
        line-height: 30px;
        color: #032D32;
    }

    .cards_benefits > p {
        font-size: 16px;
        font-weight: 400;
        line-height: 22px;
        color: #032D32;
    }

    .hero-cta_secondary {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: max-content;
        padding: 15px 25px 15px 25px;
        background-color: #f36d64;
        color: #ffffff;
        border-radius: 30px;
        text-decoration: none;
        font-weight: 600;
        gap: 15px;
    }


@media (max-width: 1400px) {
  .container_benefits {
    padding: 80px 60px;
  }
}

@media (max-width: 1120px) {
  .cards_benefits {
    width: 48%;
  }
}


/* Responsive mobile */
@media (max-width: 768px) {
  .container_benefits {
    padding: 80px 0 !important;
    gap: 30px;
  }
  
  .container_benefits > h2 {
    padding: 0 20px !important;
    text-align: center;
  }
  .content_benefits {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 20px;
    width: 100%;
    overflow: hidden;
    overflow: scroll;
    flex-wrap: nowrap;
    padding: 0 20px;
  }
  .cards_benefits {
    width: 280px !important;
  }
  .title_benefits {width: 250px;}
  .title_benefits > img {width: 80px;}
  .title_benefits > h3 {
    font-size: 24px;
    line-height: 30px;
    color: #032D32;
  }
}