/**
 * @file
 * Styles for Steps 3 Blocs section.
 * Mobile-first responsive design
 */

/* Section uses .section-padding utility class from _utility.css */

.s-steps-3-blocs {
  align-self: stretch;
}

.s-steps-3-blocs__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9375rem;
}

@media all and (min-width: 769px) {

.s-steps-3-blocs__container {
    gap: 1.25rem
}
  }

@media all and (min-width: 1201px) {

.s-steps-3-blocs__container {
    gap: 2.5rem
}
  }

/* Header */

.s-steps-3-blocs__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  justify-content: flex-start;
  text-align: center;
  gap: 0.9375rem;
}

@media all and (min-width: 769px) {

.s-steps-3-blocs__header {
    gap: 1.25rem
}
  }

/* Title uses .section-title utility class from _utility.css */

.s-steps-3-blocs__description {
  color: #6a6c7e;
}

/* Grid - Mobile first: column, desktop: row */

.s-steps-3-blocs__grid {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  justify-content: flex-start;
  gap: 1.25rem;
}

@media all and (min-width: 1201px) {

.s-steps-3-blocs__grid {
    flex-direction: row;
    flex-wrap: wrap
}
  }

.s-steps-3-blocs__grid .m-step-card {
  overflow: hidden;
  flex: 1 1 auto;
}

@media all and (min-width: 1201px) {

.s-steps-3-blocs__grid .m-step-card {
    flex: 1 1 0
}
  }