Coder Wrap provides free to use snippets

/**Typeo CSS Start**/
  @import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,400;0,500;0,700;0,800;1,300;1,400;1,500;1,600;1,700&display=swap');
  * {
  box-sizing: border-box;
  }
  body {
  margin: 0px;
  background-color: #fff;
  }
  img {
  max-width: 100%;
  }
  /**Typeo CSS End**/
  .imgcontoverlay-scn, .imgcontoverlay-scn * {
  --page-width: 1230px;
  --base-fm:'Rubik', sans-serif;
  --title-size:35px;
  --base-size:18px;
  --black-clr:#000000;
  --white-clr:#ffffff;
  --bg-clr:#fffbf8;
  --theme-clr:#ff6200;
  }
  .page-width {
  max-width: var(--page-width);
  padding: 0 15px;
  margin: auto;
  width: 100%;
  }
  
    .imgcontoverlay-scn {
    width: 100%;
    font-size: var(--base-size)
    color: var(--black-clr);
    font-family: var(--base-fm);
    padding: 60px 0px;
    
    
    }
  .imgcont-inner {
   display: flex;
   flex-flow: row wrap;
   align-items: center;
  } 
    .imgcont-inner .imgoverlay {
     width: 60%;
    }
    .imgcont-inner .contoverlay {
     width: 50%;
     margin-left: -10%;
     background-color: var(--white-clr);
     padding: 15px 50px;
     box-shadow: rgba(0,0,0,0.2) 2px 0px 11px;
     display: flex;
     flex-flow: row wrap;
     min-height: 400px;
     align-content: center;
     border-radius: 8px;
    }
  .imgcontoverlay-scn h2 {
  margin: 0px;
  font-size: var(--title-size);
  }
  .imgcontoverlay-scn h2 span {
  color: var(--theme-clr);
  }
  .imgcontoverlay-scn p {
  line-height: 1.5;
  margin: 20px 0;
  }
  .imgcont-inner .imgoverlay img {
    width: 100%;
    border-radius: 8px;
}
  .imgcontoverlay-scn .cmn-btn {
  background-color: var(--theme-clr);
  color: var(--white-clr);
  padding: 14px 30px;
  display: inline-block;
  text-decoration: none;
  transition: 0.5s all;
  border: var(--theme-clr) 1px solid;
  }
  .imgcontoverlay-scn .cmn-btn:hover {
  background-color: transparent;
  color: var(--theme-clr);
  }