Modelo Imobiliária 1 - Sessão Heróica Sobre

FIDDLE: https://jsfiddle.net/francisco_negrao/r3zejf8u/30/

HTML:

<section class="py-5 iSessionHero2">

<div class="container">
  <div class="row">
  
<!-- Column First -->

    <div class="col-lg-7 col-12">
      <div class="sessionInfo">
        <h1>
          Sobre nossa empresa
        </h1>
        <p>
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
        </p>
        <!-- List with Styled Info -->
        <ul>
          <li>
            <img src="https://www.interago.com.br/App/Sites/1/mc/001-Componentes - Mídias/svg-icons/Icon feather-target.svg" width="50" height="50" alt="Ícone Alvo Missão" loading="lazy" />
            <div class="dsc">
                <p>
                  <strong>Missão</strong>
                </p>
                <p>
                  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
                </p>
            </div>
          </li>
                    <li>
            <img src="https://www.interago.com.br/App/Sites/1/mc/001-Componentes - Mídias/svg-icons/Icon awesome-flag.svg" width="50" height="50" alt="Ícone Bandeira Visão" loading="lazy" />
            <div class="dsc">
                <p>
                  <strong>Visão</strong>
                </p>
                <p>
                  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
                </p>
            </div>
          </li>
          <li>
            <img src="https://www.interago.com.br/App/Sites/1/mc/001-Componentes - Mídias/svg-icons/Icon awesome-star.svg" width="50" height="50" alt="Ícone Valores" loading="lazy" />
            <div class="dsc">
                <p>
                  <strong>Valores</strong>
                </p>
                <p>
                  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
                </p>
            </div>
          </li>
        </ul>
      </div>
    </div>
    
 <!-- Column Second -->   
    
    <div class="col-lg-5 col-12">
      <div class="sessionImg">
            <img
              src="https://images.unsplash.com/photo-1572802419224-296b0aeee0d9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1115&q=80"
              class="img-fluid"
              alt="COLOCAR ALT DE ACORDO COM IMAGEM"
              loading="lazy"
            />
      </div>
    </div>
   
  </div>
</div>

</section>

CSS:

/* CSS SOBRE SESSÃO HERÓICA */

.iSessionHero2 {
  background-color: #163d4f;
  color: #fff;
}

.iSessionHero2 h1 {
    font-size: 30px;
    margin: 0px 0px 0px 20px;
    position: relative;
}

.iSessionHero2 h1:before {
    content: "";
    display: inline-block;
    margin-right: 10px;
    width: 10px;
    height: 100%;
    background-color: #00ADEF;
    position: absolute;
    left: -20px;
}

.iSessionHero2 ul {
  display: flex;
  gap: 20px;
}

.iSessionHero2 ul li {
    padding: 15px;
    text-align: center;
    border-radius: 5px;
    background-color: #225166;
    box-shadow: 10px 10px 20px #00000014;
}

.iSessionHero2 ul li img {
  filter: brightness(0) invert(1);
}

.iSessionHero2 .sessionImg {
  height: 100%;
}

.iSessionHero2 .sessionImg img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  box-shadow: 10px 20px 40px #00000029;
}

.iSessionHero2 .dsc p {
  font-size: 14px;
}

.iSessionHero2 .dsc p strong {
  font-size: 16px;
}

/* MOBILE SECTION CORRECTION */

@media (max-width: 992px) {
  .iSessionHero2 .col-12:nth-child(1) {
    order: 2;
  }
  .iSessionHero2 .col-12:nth-child(1) {
    order: 1;
  }
  .iSessionHero2 h1 {
    font-size: 20px;
  }
  .iSessionHero2 ul {
    gap: 20px;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    scroll-snap-type: x mandatory;
    overflow-x: scroll;
    display: flex;
  }
  .iSessionHero2 ul li {
    white-space: normal;
    margin-bottom: 15px;
    scroll-snap-align: center;
  }
  .iSessionHero2 .dsc {
    width: 250px;
  }
   
    /* width */
  .iSessionHero2 ul::-webkit-scrollbar {
    width: 3px;
    height: 3px;
  }

  /* Track */
  .iSessionHero2 ul::-webkit-scrollbar-track {
    background: #f1f1f1;
  }

  /* Handle */
  .iSessionHero2 ul::-webkit-scrollbar-thumb {
    background: #888;
  }

  /* Handle on hover */
  .iSessionHero2 ul::-webkit-scrollbar-thumb:hover {
    background: #555;
  }
  
}