<div class="section-body">
  <div class="row-card">
    <div class="culumn-card">
      <div class="image-realm"><img src="https://cdn.pixabay.com/photo/2017/01/20/15/12/oranges-1995079_960_720.jpg">
      </div>
      <h1>Learning Card Design</h1>
      <a class="button-buy" href="#">Buy Now</a>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas maecenas pharetra convallis posuere morbi leo urna. Et tortor consequat id porta nibh venenatis cras sed. Felis eget velit aliquet sagittis id consectetur purus. In cursus turpis massa tincidunt dui ut ornare lectus. Sit amet risus nullam eget felis eget nunc. Enim sit amet venenatis urna cursus eget nunc.</p>
    </div>
    <div class="culumn-card">
       <div class="image-realm"><img src="https://cdn.pixabay.com/photo/2018/04/29/11/54/strawberries-3359755_960_720.jpg"></div>
      <h1>Learning Card Design</h1>
      <a class="button-buy" href="#">Buy Now</a>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas maecenas pharetra convallis posuere morbi leo urna. Et tortor consequat id porta nibh venenatis cras sed. Felis eget velit aliquet sagittis id consectetur purus. In cursus turpis massa tincidunt dui ut ornare lectus. Sit amet risus nullam eget felis eget nunc. Enim sit amet venenatis urna cursus eget nunc.</p>
    </div>
  </div>
</div>

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
*{
  font-family: 'Poppins', sans-serif;
}

.section-body{
background-image: linear-gradient(to left bottom, #6dc7cb, #63c3d4, #5fbedd, #63b9e3, #6fb2e7, #6db6ed, #6bbbf2, #69bff8, #52cffe, #41dfff, #46eefa, #5ffbf1);
  width:auto;
  height:auto;
  display:flex;
  flex-direction:row;
  justify-content:center;
  align-items:center;
  margin:0;
}
.row-card{
  width:100%;
  max-width:1080px;
  display:flex;
  flex-direction:row;
  justify-content:center;
  align-items:center;
}
.culumn-card{
  width:360px;
  background:#ffffff;
  padding:18px;
  margin:36px;
  box-shadow:0px 0px 63px 36px rgba(0,0,0,0.18);
  border-radius:18px;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.culumn-card p{
  text-align:justify;
}
.image-realm{
  max-width:360px;
  height:270px;
  display:flex;
  align-items:center;
  overflow:hidden;
  border-radius:18px;
}
img.culumn-card{
  width:100%;
}
.section-header{
  width:100%;
  height:90px;
  top:0;
  left:0;
  position: fixed;
  background:#ffffff;
}
.header-row{
  display:flex;
}
.header-column{
  display:flex;
  align-items:center;
  justify-content:space-between;  
}
.header-column ul{
  width:80vw;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.header-column li{
  display:flex;
  align-items:center;
  justify-content:center;
}
.section-footer{
  width:auto;
  height:90px;
  position: absolute;
  bottom:0;
  background:#ffffff;
  display:flex;
  justify-content:center;
  align-items:center;
}
.footer-row{
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
  max-width:1080px;
}
.footer-column{
  display:flex;
  justify-content:center;
  align-items:space-between;
}
.footer-column ul{
  display:flex;
  justify-content:center;
  align-items:space-between;
}
.footer-column li{
  width:100%;
  display:flex;
  align-items:center;
  cursor:pointer;
}
.button-buy{
  color:#ffffff;
  background:#333333;
  text-align:center;
  padding:9px 36px;
  text-decoration:none;
  border-radius:18px;
  width:200px;
}
h1{font-size:27px;color:#333e4e;line-height:1em;}