<section>
  <h2>Cafe</h2>
  <div class="text">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <a href="#">View More</a>
  </div>
  <img src="https://picsum.photos/id/1060/1500/1000" alt="">
</section>

// grid
section {
  display: grid;
  grid-template-columns: 40% 1fr;
  grid-template-rows: auto 1fr;
  gap: 16px 40px;

  h2 {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
  }

  img {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
  }

  .text {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
  }

  @media screen and (max-width: 767px) {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, auto);

    h2 {
      grid-column: 1 / 2;
      grid-row: 1 / 2;
    }

    img {
      grid-column: 1 / 2;
      grid-row: 2 / 3;
    }

    .text {
      grid-column: 1 / 2;
      grid-row: 3 / 4;
    }
  }
}

// Base Style
body {
  margin: 0;
  padding: 0;
  background: #d3e4cd;
}

img {
  width: 100%;
}

section {
  max-width: 980px;
  width: 90%;
  margin: 100px auto;

  img {
    @media screen and (max-width: 767px) {
      margin-top: 16px;
    }
  }

  .text {
    display: flex;
    flex-direction: column;
    padding: 0 8px;

    @media screen and (max-width: 767px) {
      margin-top: 16px;
    }
  }

  a {
    display: inline-block;
    margin-top: 16px;
    margin-left: auto;
    padding: 8px 16px;
    background: #e2c2b9;
    text-decoration: none;
    color: #fff;
    text-align: center;
    box-sizing: border-box;

    @media screen and (max-width: 767px) {
      margin: 24px auto 0;
      width: 100%;
    }
  }
}

h2 {
  margin: 0;
  padding: 8px;
  background: #99a799;
  color: #fff;
}

p {
  margin: 0;
}