<div class="hero">
  <h1>This is my hero component</h1>
  <h2>It has title, subtitle and description text</h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit molestiae explicabo, minus laboriosam tempora quos repudiandae! Nihil eaque doloremque expedita quasi beatae quibusdam impedit eius, blanditiis iste autem cumque, error modi ducimus accusamus similique adipisci voluptas illo corrupti sed tempora id! Voluptas numquam laboriosam voluptate corporis labore impedit laborum pariatur.</p>
</div>
<div class="hero">
  <div class="hero__gfx">
    <img src="https://placehold.co/400x400" width="400" height="400" alt="Placeholder image">
  </div>
  <h1>This is my hero component</h1>
  <h2>It has image, title, subtitle and description text</h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit molestiae explicabo, minus laboriosam tempora quos repudiandae! Nihil eaque doloremque expedita quasi beatae quibusdam impedit eius, blanditiis iste autem cumque, error modi ducimus accusamus similique adipisci voluptas illo corrupti sed tempora id! Voluptas numquam laboriosam voluptate corporis labore impedit laborum pariatur.</p>
</div>

body {
  font-family: ui-rounded, 'Hiragino Maru Gothic ProN', Quicksand, Comfortaa, Manjari, 'Arial Rounded MT', 'Arial Rounded MT Bold', Calibri, source-sans-pro, sans-serif;
}

.hero {
  display: grid;
  place-items: start;
  row-gap: 1rem;
  column-gap: 2rem;
  padding-block: clamp(1.25rem, 0.417rem + 3.333vw, 2.5rem);
  padding-inline: clamp(0.625rem, 0.208rem + 1.667vw, 1.25rem);
}

.hero h1,
.hero h2,
.hero p {
  margin-block: unset;
}

.hero h1 {
  font-size: clamp(1.5rem, 1.167rem + 1.333vw, 2rem);
}

.hero h2 {
  font-size: clamp(1.25rem, 0.958rem + 1.167vw, 1.688rem);
}

.hero p {
  font-size: clamp(0.938rem, 0.854rem + 0.333vw, 1.063rem);
}

.hero__gfx img {
  aspect-ratio: 1;
  border-radius: 50%;
  block-size: auto;
  max-inline-size: 100%;
}

@media screen and (width >= 440px) {
  .hero:has(.hero__gfx) {
    grid-template-columns: auto 1fr;
    grid-template-rows: 1fr auto auto auto 1fr;
    grid-template-areas: 
      "gfx ."
      "gfx title"
      "gfx subtitle"
      "gfx desc"
      "gfx .";
  } 

  .hero:has(img) h1 {
    grid-area: title;
  }

  .hero:has(img) h2 {
    grid-area: subtitle;
  }

  .hero:has(img) p {
    grid-area: desc;
  }
  
  .hero__gfx {
    grid-area: gfx;
  }
  
  .hero__gfx img {    
    max-inline-size: clamp(7.5rem, -4.167rem + 46.667vw, 25rem);
  }
}