I’m laying out a figma layout Webovio. Interested in the layout of the block 04 Services

Image from this block

blockimage

There is a code for this block

.page__company-articles {}

.company-articles {}

.company-articles__container {}

.articles__block_container {
  max-width: 1140px;
  /*margin: 0 auto;*/
  margin: 0 -100px;
  /*position: absolute;
  left: 0;
  right: 0;*/
  /*top: 0;*/
}

.article__and__comment {
  color: rgba(33, 56, 66, 0.6);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  /*margin-left: calc(165/1441*100vw);*/
  /*166/1441*100vw*/
  /*margin-right: calc(166/1441*100vw);*/
  /*166/1441*100vw*/
}

.main-article {
  flex: 0 1 50%;
  /*padding-right: 100px;*/
  padding: 0px 100px;
}

.article__first-note {
  margin-top: 120px;
  /*120*/
  /*margin-left: 166px;*/
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 21px;
  color: rgba(77, 83, 60, 0.9);
}

.article__title {
  color: #4D533C;
  margin-top: calc(29px);
  /*margin-left: 166px;*/
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-size: 36px;
  line-height: 46px;
}

.article__text {
  margin-top: calc(35px);
  /*margin-left: 166px;*/
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  color: rgba(33, 56, 66, 0.6);
}

.article__second-note {
  margin-top: calc(42px);
  /*margin-left: 166px;*/
  font-family: 'FontAwesome';
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 18px;
  text-decoration-line: underline;
  color: #D4D6D4;
}

.comment {
  flex: 0 1 50%;
  /*padding-left: 100px;*/
  box-shadow: 20px 25px 43px rgba(0, 0, 0, 0.18);
  padding: 0px 100px;
}

.comment__text {
  margin-top: calc(120px);
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 400;
  font-size: 24px;
  line-height: 40px;
  /* or 167% */
  color: #4D533C;
}

.icon__and__label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-top: calc(50px);
}

.comment__icon {
  /*margin-left: calc(40px);*/
}

.label {
  margin-top: calc(-50px);
  /*14px*/
  margin-left: calc(30px);
}

.comment__author {
  color: #4D533C;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-size: 22px;
  line-height: 33px;
  /* identical to box height */
  color: #4D533C;
}

.comment__author-position {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  /* identical to box height */
  color: #152934;
  padding-top: calc(6px);
}

@media (max-width: 1242px) {
  .main-article,
  .comment {
    flex: 0 1 100%;
    text-align: center;
    padding-left: 0px;
    padding-right: 0px;
  }
}
<section class="page__company-articles company-articles">
  <div class="company-articles__container articles__block_container">
    <div class="article__and__comment">
      <article class="main-article">
        <div class="article__first-note">What we do for you</div>
        <div class="article__title">Strategy. Design Content. Technology Development </div>
        <div class="article__text">There’s no secret sauce, no wizard behind the curtain. What makes Aerolab tick is an interdisciplinary team with a framework that fosters candid collaboration.</div>
        <div class="article__second-note">More know About us</div>
      </article>
      <article class="comment">
        <div class="comment__text">With More than 10 Years of Knowledge and Expertise we Design and Code Websites and Apps, We Build Brands and Help Them Succeed</div>
        <div class="icon__and__label">
          <div class="comment__icon">
            <img src="https://i.stack.imgur.com/NAeUC.png" alt="author">
          </div>
          <div class="label">
            <div class="comment__author">Genevieve Rodriquez</div>
            <div class="comment__author-position">Founder & CEO, Webovio</div>
          </div>
        </div>
      </article>
    </div>
  </div>
</section>

Tell me how to make the block shown here in full-screen mode look like it does on a one-line layout while maintaining the value of the flex-wrap property. Blocks with classes main_article and comment should be on one line with some padding between them and some padding from the screen edges. The line above with company logos is of no interest, it does not need to be typeset

See in full page view

@import "https://cdn.jsdelivr.net/gh/KunalTanwar/normalize/css/normalize.inter.min.css";
.container {
  display: flex;
  flex-direction: column;
}

.container header {
  width: 100%;
  height: 400px;
  background-color: pink;
}

.container section {
  width: 100%;
  height: 800px;
  padding-inline: 8rem;
}

.container section .floating {
  position: absolute;
  top: 0;
  right: 0;
  width: 80%;
  z-index: 1;
  height: 200px;
  background-color: white;
  transform: translateY(-50%);
  box-shadow: 0 16px 64px 0 rgba(0, 0, 0, 0.5);
}

.container section .wrapper {
  height: 600px;
  display: flex;
  align-items: center;
  background-color: lightgreen;
}

.container section .wrapper .card {
  width: 800px;
  height: 100%;
  background-color: red;
}
<div class="container">
  <header>
    <h1>A creative agency for redemptive brands</h1>
  </header>

  <section>
    <div class="floating"></div>
    <div class="wrapper">
      <h1>
        Strategy. Design Content. Technology Development
      </h1>

      <div class="card"></div>
    </div>
  </section>
</div>