/* how-it-works.css: ported 1:1 from foodforjoe.es CSS modules (hash suffixes removed). */

/* ── DeliveryProcess ── */
.DeliveryProcess_deliveryProcess {
  padding:40px 20px;
}

.DeliveryProcess_title {
  width:100%;
  text-align:center;
  font-size:26px;
  line-height:32px;
  margin-bottom:22px;
}

.DeliveryProcess_steps {
  display:flex;
  flex-direction:column;
  align-items:center;
  margin-bottom:40px;
}

.DeliveryProcess_step {
  text-align:center;
  margin-bottom:27px;
}

.DeliveryProcess_emojis {
  display:flex;
  gap:0;
  justify-content:center;
  margin-bottom:0;
}

.DeliveryProcess_emojis img {
  width:120px;
  height:auto;
}

.DeliveryProcess_emojis img:nth-child(2) {
  margin-left:-40px;
}

.DeliveryProcess_stepTitle {
  font-family: var(--font-family-serif-medium); font-variation-settings: var(--gp-medium-axes);
  font-size:15px;
  text-align:center;
  margin-bottom:7px;
}

.DeliveryProcess_stepDescription {
  font-family:var(--font-family-serif-light);
  font-size:16px;
  text-align:center;
}

.DeliveryProcess_cta {
  display:block;
  margin:0 auto;
  width:-moz-fit-content;
  width:fit-content;
}

@media (min-width:960px) {
  .DeliveryProcess_deliveryProcess {
    padding:80px 0;
  }
}

@media (min-width:960px) {
  .DeliveryProcess_title {
    font-size:40px;
    margin-bottom:60px;
  }
}

@media (min-width:960px) {
  .DeliveryProcess_steps {
    flex-direction:row;
    align-items:flex-start;
    justify-content:center;
    gap:40px;
  }
}

@media (min-width:960px) {
  .DeliveryProcess_step {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:15px;
  }
}

@media (min-width:960px) {
  .DeliveryProcess_stepTitle {
    font-size:20px;
    max-width:300px;
  }
}

@media (min-width:960px) {
  .DeliveryProcess_stepDescription {
    max-width:300px;
  }
}

@media (min-width:960px) {
  .DeliveryProcess_emojis {
    margin-bottom:-10px;
  }
}

@media (min-width:960px) {
  .DeliveryProcess_emojis img {
    width:150px;
    height:auto;
  }
}

@media (min-width:960px) {
  .DeliveryProcess_emojis img:nth-child(2) {
    margin-left:-60px;
  }
}
