How do I handle image sizing in hero area?

Question

I have created a hero area and between this, I have created two divisions and applied a style display with the grid. Now I have put text and buttons on one side and the other side contains an image. As per the Figma file, I need to set the image a little bit bigger than the text area in the same portion of the display. Please help me to code this properly. I have coded this,

**HTML Part**

    <section class="hero-area">
        <div class="hero-text child">
            <div class="text-area">
                <h1 class="text-transform">Create Stunning <br>
                Email Campaigns</h1>
                <p>Create and launch email campaigns that captivate <br>
                your customers in just a few clicks.</p>
                <button class="button button-1">Try Now</button>
                <button class="button button-2">Get A Demo</button>
            </div>
        </div>
        <div class="hero-img child">
            <img class="image-size" src="./images/banner-photo.jpg" alt="">
        </div>
</section>

**CSS Part**

.hero-area {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 25px 0px;
  padding: 25px 5px;
}

.hero-text {
  display: flex;
  justify-content: center;
  align-items: center;
}

.image-size {
    width: 130%;
    height: auto;
}

.text-area h1 {
  font-size: 50px;
  font-weight: 700;
  margin: 0;
}

Answer 1

There's a myriad of ways you could go about this, but I would recommend putting everything into a container and then using responsive units (https://www.sitepoint.com/css-viewport-units-quick-start/) to size the image and the text so the image is bigger than the text as you scale it. You can take this a step further by using fluid type but you'll need to tweak the values for that to get it where you want it and that'll take some testing. See: https://css-tricks.com/snippets/css/fluid-typography/

Let me know what you think.

body {
  background-color: lightgrey;
}

.container {
  display: block;
  flex-direction: row;
  margin: 0 auto;
  background-color: white;
}

.hero-area {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 25px 0px;
  padding: 25px 5px;
}

.hero-text {
  display: flex;
  justify-content: center;
  align-items: center;
}

.image-size {
  width: auto;
  height: 35vw;
  box-shadow: 2px 2px 5px grey;
}

.text-area h1 {
  font-family: arial;
  font-size: 4vw;
  font-weight: 800;
  margin: 0;
}

.filler {
  font-family: arial;
  font-size: 1.5vw;
  padding-bottom: 2vw;
  font-weight: 400;
  margin: 0;
}

.button-1 {
  padding: 10px 20px;
  background-color: forestgreen;
  border: 2px solid forestgreen;
  color: white;
  font-weight: 700;
}

.button-2 {
  padding: 10px 20px;
  background-color: white;
  border: 2px solid forestgreen;
  color: forestgreen;
  font-weight: 700;
}

<div class="container">
  <section class="hero-area">
    <div class="hero-text child">
      <div class="text-area">
        <h1 class="text-transform">Create Stunning <br> Email Campaigns</h1>
        <p class="filler">Create and launch email campaigns that captivate <br> your customers in just a few clicks.</p>
        <button class="button button-1">TRY NOW</button>
        <button class="button button-2">GET A DEMO</button>
      </div>
    </div>
    <div class="hero-img child">
      <img class="image-size" src="https://i.imgur.com/rsSBOSd.jpeg" alt="">
    </div>
  </section>
</div>