Untitled

<div class="gem-values">
  <header class="gem-values__header">
    <p class="gem-values__eyebrow">Our values</p>
    <h2 class="gem-values__title">Committed to beauty that is respectful, sustainable and inspired by nature</h2>
  </header>

  <div class="gem-values__grid">
    <article class="gem-value">
      <span class="gem-value__stone">Jade</span>
      <h3 class="gem-value__title">Science &amp; Innovation</h3>
      <p class="gem-value__text">Our research has led to the development of a unique technology for extracting trace elements from minerals through the natural process of solubilization. This has led to the creation of Gemology's innovative complexes, combining the most powerful cosmetic active ingredients with trace elements derived from precious and semi-precious stones.</p>
    </article>

    <article class="gem-value">
      <span class="gem-value__stone">Rubis</span>
      <h3 class="gem-value__title">Quality &amp; Efficiency</h3>
      <p class="gem-value__text">Every Gemology formula is clinically tested for effectiveness. Our commitment is to deliver immediate, visible results. Our face and body treatments are precise, sophisticated, unique and ultra-effective.</p>
    </article>

    <article class="gem-value">
      <span class="gem-value__stone">Saphir</span>
      <h3 class="gem-value__title">Creator of Emotions</h3>
      <p class="gem-value__text">Every formula, every texture, every fragrance is meticulously crafted to create real sensorial experiences. Well-being also lies in the emotions aroused by skincare products.</p>
    </article>

    <article class="gem-value">
      <span class="gem-value__stone">Diamant</span>
      <h3 class="gem-value__title">CSR Commitment</h3>
      <p class="gem-value__text">A French brand with ethical and environmental values, we offer products that respect sustainable practices, from the manufacturing process to the point of sale. Ingredients and packaging come from eco-responsible sources.</p>
    </article>
  </div>
</div>

<style>
  .gem-values {
    font-family: 'Helvetica Neue', Arial, sans-serif !important;
    color: #1a1a1a !important;
    background: #faf8f5 !important;
    padding: 80px 24px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .gem-values *,
  .gem-values *::before,
  .gem-values *::after {
    box-sizing: border-box !important;
  }

  .gem-values__header {
    text-align: center !important;
    max-width: 820px !important;
    margin: 0 auto 60px auto !important;
  }

  .gem-values__eyebrow {
    font-size: 14px !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
    color: #8a7a5c !important;
    margin: 0 0 16px 0 !important;
    font-weight: 500 !important;
  }

  .gem-values__title {
    font-size: 32px !important;
    line-height: 1.3 !important;
    font-weight: 400 !important;
    color: #1a1a1a !important;
    margin: 0 !important;
    letter-spacing: 0.5px !important;
  }

  .gem-values__grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 32px !important;
    max-width: 1100px !important;
    margin: 0 auto !important;
  }

  .gem-value {
    background: #ffffff !important;
    padding: 40px 32px !important;
    border: 1px solid #ece6db !important;
    border-radius: 4px !important;
    text-align: left !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
  }

  .gem-value:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06) !important;
  }

  .gem-value__stone {
    display: inline-block !important;
    font-size: 12px !important;
    letter-spacing: 2.5px !important;
    text-transform: uppercase !important;
    color: #ffffff !important;
    background: #8a7a5c !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    margin-bottom: 20px !important;
    font-weight: 500 !important;
  }

  .gem-value__title {
    font-size: 22px !important;
    font-weight: 500 !important;
    color: #1a1a1a !important;
    margin: 0 0 16px 0 !important;
    letter-spacing: 0.5px !important;
  }

  .gem-value__text {
    font-size: 15px !important;
    line-height: 1.7 !important;
    color: #4a4a4a !important;
    margin: 0 !important;
  }

  @media (max-width: 768px) {
    .gem-values {
      padding: 56px 16px !important;
    }
    .gem-values__title {
      font-size: 24px !important;
    }
    .gem-values__grid {
      grid-template-columns: 1fr !important;
      gap: 20px !important;
    }
    .gem-value {
      padding: 32px 24px !important;
    }
  }
</style>