Common product description

by Sasá Rafalsky

HTML

<div class="container container1">
  <div class="item item1">
    <div class="inner">
      <div class="text">
        <div class="title">
          Premium Care for Your Pet
        </div>
        <div class="description">At PawClawLab.com, we understand your pet is family. That's why our products are crafted with your pet's well-being in mind. Whether you need nutritious food, fun toys, or practical accessories, we offer only the best for your furry friend.
        </div>
      </div>
    </div>
  </div>
  <div class="item item2">
    <div class="inner">
      <div class="image">
        <div class="in">
          <img src="//pawclawlab.com/cdn/shop/files/nav-menu-ECO-PRODUCTS.png?v=1720891244&amp;width=500" alt="" srcset="//pawclawlab.com/cdn/shop/files/nav-menu-ECO-PRODUCTS.png?v=1720891244&amp;width=352 352w, //pawclawlab.com/cdn/shop/files/nav-menu-ECO-PRODUCTS.png?v=1720891244&amp;width=500 500w" width="500" height="500">

        </div>
      </div>
    </div>
  </div>
  <div class="item item3">
    <div class="inner">
      <div class="image">
        <div class="in">
          <img src="//pawclawlab.com/cdn/shop/files/nav-menu-LIFE_STAGES.png?v=1720894888&amp;width=500" alt="" srcset="//pawclawlab.com/cdn/shop/files/nav-menu-LIFE_STAGES.png?v=1720894888&amp;width=352 352w, //pawclawlab.com/cdn/shop/files/nav-menu-LIFE_STAGES.png?v=1720894888&amp;width=500 500w" width="500" height="500">
        </div>
      </div>
    </div>
  </div>
  <div class="item item4">
    <div class="inner">
      <div class="image">
        <div class="in">
          <img src="//pawclawlab.com/cdn/shop/files/nav-menu-CAT.png?v=1720894888&amp;width=500" alt="" srcset="//pawclawlab.com/cdn/shop/files/nav-menu-CAT.png?v=1720894888&amp;width=352 352w, //pawclawlab.com/cdn/shop/files/nav-menu-CAT.png?v=1720894888&amp;width=500 500w" width="500" height="500">
        </div>
      </div>
    </div>
  </div>
</div>

<div class="container container2">
  <div class="item item1">
   ...

SCSS

body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #ccc;
}

.container {
  margin: 10px 0;
  max-width: 800px;
  max-height: 600px;
  display: flex;
  flex-wrap: wrap;
  width: 80%;
  height: 80vh;
  background-color: #fff;
  padding: 8px;
  border-radius: 12px;
  box-sizing: border-box;
  position: relative;

  &.container1 {
    display: none !important;

    .item {
      box-sizing: border-box;
      border-radius: 5px;
      padding: 4px;

      .inner {
        width: 100%;
        height: 100%;
        box-sizing: border-box;

        .text {
          display: flex;
          justify-content: center;
          flex-direction: column;
          width: 100%;
          height: 100%;

          .title {
            font-size: 2rem;
            font-weight: bold;
            text-align: left;
            padding: 0 0 1rem;
          }

          .description {
            font-size: 13px;
          }
        }

        .image {
          position: relative;
          height: 100%;
          width: 100%;

          .in {
            border-radius: 12px;
            box-sizing: border-box;
            position: absolute;
            overflow: hidden;
            height: 100%;
            width: 100%;
            left: 0;

            img {
              background-position: center 65%;
              background-repeat: no-repeat;
              box-sizing: border-box;
              background-size: cover;
              display: inline-block;
              overflow: hidden;
              height: 100%;
              width: 100%;
              object-fit: cover;
            }
          }
        }
      }

      &.item1 {
        width: 60%;
        height: 60%;
        //background-color: lightblue;
      }

      &.item2 {
        width: 40%;
        height: 60%;
        //background-color: lightgreen;
      }

      &.item3 {
...