/**
 * @file
 * MLT Modern — How-we-work card.
 *
 * Image-top card explaining one aspect of the working process. Used in a
 * grid below a section heading like "How We Work in Your Home".
 *
 * Markup:
 *   <div class="mlt-how-grid">
 *     <div class="mlt-how-card">
 *       <div class="mlt-how-card__image" style="background-image: url('...')"></div>
 *       <div class="mlt-how-card__body">
 *         <h3>Dust extraction at the source</h3>
 *         <p>We use professional Metabo wall-chasing tools...</p>
 *       </div>
 *     </div>
 *     ...
 *   </div>
 */

.mlt-how-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 28px;
}

.mlt-how-card {
  background: #fff;
  border-radius: var(--mlt-radius-lg);
  overflow: hidden;
  border: 1px solid var(--mlt-border);
  box-shadow: var(--mlt-shadow-card);
  display: flex;
  flex-direction: column;
}

.mlt-how-card__image {
  aspect-ratio: 4 / 3;
  background-color: #d0dae5;
  background-size: cover;
  background-position: center;
}

.mlt-how-card__body {
  padding: 24px 28px;
  flex: 1;
}

.mlt-how-card h3 {
  font-size: 20px;
  color: var(--mlt-primary);
  margin: 0 0 12px;
  line-height: 1.3;
  font-weight: 700;
}

.mlt-how-card p {
  color: var(--mlt-text-light);
  font-size: 15px;
  line-height: 1.65;
  margin: 0;
}