<section class="faq">
  <h4>Часто задаваемые вопросы</h4>
  <div class="container-min faq-con">
    <div class="question q-odd q-1">
      <p class="p-quest">Как осуществляется <span class="up-orange">доставка</span>?</p>
      <span class="faq-number">1</span>
    </div>
    <div class="question q-even q-2">
      <span class="faq-number">2</span>
      <p class="p-quest"><span class="up-orange">Бесплатная</span> доставка?</p>
    </div>
    <div class="question q-odd q-3">
      <p class="p-quest">Как осуществляется <span class="up-orange">оплата</span>?</p>
      <span class="faq-number">3</span>
      <div class="answer">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sint, minima dignissimos consequuntur distinctio iusto ad dolorem odit quasi eos nesciunt possimus at fugiat optio sequi itaque ab cum repudiandae amet.</div>
    </div>
    <div class="question q-even q-4"><span class="faq-number">4</span>
      <p class="p-quest">Могу ли я <span class="up-orange">приостановить</span> заказ в случае отъезда?</p>
    </div>
    <div class="question q-odd q-5">
      <p class="p-quest">Как <span class="up-orange">хранить</span> еду?</p><span class="faq-number">5</span>
    </div>
    <div class="question q-even q-6"><span class="faq-number">6</span>
      <p class="p-quest">Как часто <span class="up-orange">повторяются</span> блюда?</p>
    </div>
    <div class="question q-odd q-7">
      <p class="p-quest">Можно ли <span class="up-orange">отменить</span> заказ или перенести?
      </p>
      <span class="faq-number">7</span>
    </div>
    <div class="question q-even q-8"><span class="faq-number">8</span>
      <p class="p-quest">Можно ли использовать <span class="up-orange">микроволновку</span>?</p>
    </div>
  </div>
</section>

.container-min {
  max-width: 940px;
}
.faq {
  background-color: #a094b7;
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: cover;
  color: #fff;
  padding-bottom: 30px;
}
.faq-con {
  overflow: hidden;
  padding-bottom: 20px;
}

.faq h4 {
  font-size: 46px;
  text-align: center;
  color: #ffbd49;
  font-weight: 600;
}

.up-orange {
  color: #ffbd49;
  text-transform: uppercase;
}

.faq-number {
  position: relative;
  font-size: 72px;
  font-weight: 100;
  font-family: "Poiret One";
}

.question {
  width: 50%;
  float: left;
  display: flex;
  position: relative;
}

.q-odd {
  justify-content: flex-end;
}

.q-odd p {
  text-align: end;
}

.q-even {
  position: relative;
  top: 30px;
}
.faq-con .answer {
  border: solid 2px #ffbd49;
  background: rgba(0, 0, 0, 0.7);
  font-size: 14px;
  font-weight: 300;
  color: white;
  position: absolute;
  left: 20px;
  right: -20px;
  padding: 100px 20px 100px 20px;
  z-index: 1;
}
.faq-con .answer p.p-answer {
  width: 100%;
  text-align: inherit;
}

.question p.p-quest {
  width: 50%;
  margin-top: auto;
  position: relative;
}

.faq div {
  font-size: 17px;
}

.q-3 .faq-number {
  z-index: 2;
}

.q-3 .p-quest {
  z-index: 2;
}

.q-odd .faq-number {
  transform: translateX(10px);
}

.q-even .faq-number {
  transform: translateX(-10px);
}