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**/
  .twocolumn-scn, .twocolumn-scn * {
  --page-width: 1330px;
  --base-fm:'Rubik', sans-serif;
  --title-size:40px;
  --base-size:16px;
  --white-clr:#ffffff;
  --theme-clr:#ff6200;
  }
.page-width {
  max-width: var(--page-width);
  padding: 0 15px;
  margin: auto;
  width: 100%;
  }
  .twocolumn-scn {
  	width: 100%;
  	padding: 50px 0px;
  	color: var(--base-size);
  	font-family: var(--base-fm);
  }
  .twocolumn-list {
    display: flex;
    flex-flow: row wrap;
    width: calc(100% + 40px);
    margin-left: -20px;
}

.twocolumn-list .twocolumn-item {width: calc(50% - 40px);margin: 0px 20px;position: relative;overflow: hidden;}

.twocolumn-cont {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 50%;
    transform: translateY(-50%);
    margin: auto;
    width: 90%;
    padding: 10px;
    color: var(--white-clr);
    text-align: center;
}

.twocolumn-list .twocolumn-item img {
    display: block;
    transition: 0.8s all;
}

.twocolumn-list .twocolumn-item:hover img {
    transform: scale(1.1);
}
.offertext {
    display: block;
    font-size: 18px;
    margin-bottom: 20px;
}

.twocont-title {
    display: block;
    font-size: 34px;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.cmn-btn {
 padding: 12px 30px;
 background-color: #000;
 color: #fff;
 text-decoration: none;
 display: inline-block;
 transition: 0.5s all;
 margin-top: 10px;
 font-size: 18px;
}

.cmn-btn:hover {
   background-color: var(--theme-clr);
}
@media(max-width: 992px) {
  .twocolumn-list {
    width: calc(100% + 20px);
    margin-left: -10px;
}
.twocolumn-list .twocolumn-item {
    width: calc(50% - 20px);
    margin: 0px 10px;
}
.twocont-title {
  font-size: 25px;
}
.offertext {
    display: block;
    font-size: 14px;
    margin-bottom: 10px;
}
.cmn-btn {
    padding: 10px 20px;
    margin-top: 10px;
    font-size: 15px;
}
}
@media(max-width: 767px) {
  .twocolumn-scn {
    padding: 30px 0px;
  }
  .twocolumn-list {
    width: 100%;
    margin-left: 0px;
}
.twocolumn-list .twocolumn-item {
    width: 100%;
    margin: 10px 0px;
}
}