.featured-blocks-widget {
  display: flex;
  height: 300px;
  max-width: 1310px;
  justify-content: center;
  align-items: flex-start;
  align-content: flex-start;
  gap: 125px;
  align-self: stretch;
  flex-wrap: wrap;
  margin-top: -85px;
  position: relative;
  z-index: 9;
}
.featured-block-card{
  position: relative;
  display: flex;
width: 441.75px;
height: 285px;
min-width: 300px;
max-width: 441.75px;
padding: 0px 26px;
justify-content: center;
align-items: center;
  border-radius: 5px;
border: 4px solid #FFF;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), url(<path-to-image>) lightgray 50% / cover no-repeat;
box-shadow: 2.723px 2.723px 8.17px 0px rgba(0, 0, 0, 0.25);
transition: all 0.4s ease-in-out;
background-position: center;
background-size: cover;
}
.featured-block-card:hover{
  display: flex;
width: 470.887px;
height: 306.85px;
min-width: 300px;
max-width: 470.89px;
padding: 0px 26px;
justify-content: center;
align-items: center;
}

.featured-block-overlay{
  background:linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%);
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.featured-blocks-widget .featured-block-card h3 {
  z-index: 1;
  color: #FFF;
  text-align: center;
  font-family: "ddt", sans-serif;
  font-size: 40px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 1.2px;
  text-transform: capitalize;
  margin-bottom: 0;
}
@media only screen and (max-width: 1260px) {
  .featured-blocks-widget{
    gap: 50px;
  }
  .featured-block-card{
    width: 350px;
  }
}

@media only screen and (max-width: 998px) {
  .featured-blocks-widget .featured-block-card h3{
font-size: 35px;
line-height: 42px;
  }
  .featured-block-card{
    height: 285px;
  }
  .featured-blocks-widget{
    height: auto;
  }
  .featured-blocks-widget .featured-blocks {
  	flex: 1 1 50%;
  	max-width: 50%;
  }
  .featured-blocks-widget{
    margin-top: -40px;
  }
}
@media only screen and (max-width: 560px) {
  .featured-blocks-widget .featured-blocks {
  	flex: 1 1 100%;
  	max-width: 100%;
  }
  .featured-blocks-widget .featured-blocks.scrolled h3 {
    text-align: left;
  }
}