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

/* ── WhatIsIt ── */
.WhatIsIt_container {
  background-color:var(--color-green);
  color:var(--color-white);
  padding:40px 0;
  display:flex;
  justify-content:center;
  flex-direction:column;
  align-items:center;
}

.WhatIsIt_title {
  margin-bottom:40px;
}

.WhatIsIt_emoji {
  display:flex;
  align-items:center;
  justify-content:center;
  width:54px;
  height:54px;
  background-image:url("../../../assets/textures/beige-badge.png");
  background-size:cover;
}

.WhatIsIt_emoji img {
  width:40px;
  height:auto;
}

.WhatIsIt_steps {
  display:flex;
  justify-content:center;
  gap:30px;
  flex-wrap:wrap;
  width:100%;
  padding:0 20px;
}

.WhatIsIt_step {
  flex:0 1 100px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
}

.WhatIsIt_step p {
  width:100%;
  text-align:center;
}

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

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

@media (min-width:960px) {
  .WhatIsIt_steps {
    gap:40px;
    justify-content:center;
  }
}

@media (min-width:960px) {
  .WhatIsIt_step {
    flex:0 0 fit-content;
  }
}

@media (min-width:960px) {
  .WhatIsIt_emoji {
    width:172px;
    height:172px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:10px;
  }
}

@media (min-width:960px) {
  .WhatIsIt_step p {
    max-width:120px;
    text-wrap:balance;
  }
}