/* Section container */
.how_to_use_it_container {
  background-color: var(--grey2);
}

/* Image */
.how_to_img {
  width: 100%;
  height: auto;
}

/* "How to" section container */
.how_to_use_it_container .container {
  padding: 80px 100px;
  display: flex;
  gap: 80px;
  align-items: center;
}

/* Instruction (1. ; 2. ; 3. */
.instruction {
  display: flex;
  gap: 25px;
}

/* Instructions + it's text */
.how_to_info_div,
.instruction_text,
.instructions_div {
  display: flex;
  flex-direction: column;
  max-width: 572px;
}

/* Instructions */
.instructions_div {
  gap: 30px;
  margin-top: 45px;
}

/* Instruction text */
.instruction_text {
  gap: 10px;
}

/* Instruction text */
.instruction_text > span {
  color: var(--grey1);
}

/* Icons */
.user_icon,
.cart_icon,
.truck_icon {
  width: 35px;
}

/* User icon */
.user_icon {
  height: 35px;
}

/* Cart icon */
.cart_icon {
  height: 30px;
}

/* Truck icon */
.truck_icon {
  height: 25px;
}

/* "how to" section colored text */
.how_to_colored_text {
  margin-bottom: 7px;
  color: var(--purple1);
}

/* Section title div (mobile) */
.how_to_info_div_mobile {
  display: none;
}

@media screen and (max-width: 1200px) {
  /* Section container */
  .how_to_use_it_container .container {
    align-items: start;
  }
}

@media screen and (max-width: 1100px) {
  /* "How to" section container */
  .how_to_use_it_container .container {
    padding: 80px 50px;
  }
}

@media screen and (max-width: 1000px) {
  /* Section title div (mobile) */
  .how_to_info_div_mobile {
    display: block;
    text-align: center;
  }

  /* Section title div (desktop) */
  .how_to_info_div > .how_to_colored_text,
  .how_to_info_div > .h2 {
    display: none;
  }

  /* "How to" section container */
  .how_to_use_it_container .container {
    flex-direction: column;
    padding: 50px 20px;
    gap: 0px;
    align-items: center;
  }

  /* Informational text */
  .instruction {
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }

  /* Informational text */
  .instruction_text {
    align-items: center;
    gap: 7px;
    width: 80%;
  }

  /* Informational text */
  .instruction_text > span {
    text-align: center;
  }

  /* Image div */
  .how_to_image_div {
    width: 40%;
    margin-top: 30px;
    margin-bottom: 40px;
  }

  /* Section title + informational text */
  .how_to_colored_text,
  .instruction_text span {
    font-size: 16px;
    text-wrap: balance;
  }

  /* Section title */
  .how_to_info_div_mobile .h2 {
    font-size: 22px;
  }

  /* Informational text title */
  .instruction_text .h3 {
    font-size: 18px;
    text-align: center;
  }

  /* Informational text div */
  .instructions_div {
    margin: 0px;
  }
}

@media screen and (max-width: 767px) {
  /* Informational text */
  .instruction_text {
    width: 100%;
  }

  /* Image div */
  .how_to_image_div {
    width: 300px;
    height: 270px;
  }

  /* Section title + informational text */
  .how_to_colored_text,
  .instruction_text span {
    font-size: 14px;
  }

  /* Section title */
  .how_to_info_div_mobile .h2 {
    font-size: 18px;
  }

  /* Informational text title */
  .instruction_text .h3 {
    font-size: 16px;
  }
}