.recPostOuter {
  background-repeat: no-repeat;
  background-attachment: fixed;
}
.recPost-MasterHead {
  margin: 0 auto 40px;
  max-width: 620px;
  text-align: center;
}
.recPost-MasterHead h2, 
.recPost-MasterHead h3,
.recPost-MasterHead h6 {
  margin-bottom: 16px;
}
.recPost-MasterHead h2:hover, 
.recPost-MasterHead h3:hover,
.recPost-MasterHead h6:hover {
  margin-bottom: 16px;
}
/*.recPostInner {
justify-content: center;
align-content: center;
flex-wrap: wrap;
display: flex;
gap: 32px;
align-self: stretch;
}*/

.recPostInner {
  display: flex;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
  gap: 32px;
  align-self: stretch;
  position: relative;

  > * {
    position: relative;
    transition: transform 0.3s, background-color 0.3s, box-shadow 0.3s;
  }

  > *:first-child {
    z-index: 6;
    background-color: #FFF !important;
/*     box-shadow:
      2.8px 2.8px 2.2px rgba(0, 0, 0, 0.008),
      6.7px 6.7px 5.3px rgba(0, 0, 0, 0.012),
      12.5px 12.5px 10px rgba(0, 0, 0, 0.015),
      22.3px 22.3px 17.9px rgba(0, 0, 0, 0.018),
      41.8px 41.8px 33.4px rgba(0, 0, 0, 0.022),
      100px 100px 80px rgba(0, 0, 0, 0.03); */
  }

  > *:first-child:hover {
    transform: scale(1.05);
    background-color: #ffff !important;
/*     box-shadow:
      3px 3px 2.5px rgba(0, 0, 0, 0.01),
      7px 7px 5.5px rgba(0, 0, 0, 0.015),
      13px 13px 10.5px rgba(0, 0, 0, 0.02),
      23px 23px 18.5px rgba(0, 0, 0, 0.025),
      42px 42px 34.5px rgba(0, 0, 0, 0.03),
      101px 101px 81px rgba(0, 0, 0, 0.04); */
  
  }

  > *:first-child(:hover) {
    transform: scale(1.05);
    background: rgba(255, 255, 255, 0.80);
/*     box-shadow:
      3px 3px 2.5px rgba(0, 0, 0, 0.01),
      7px 7px 5.5px rgba(0, 0, 0, 0.015),
      13px 13px 10.5px rgba(0, 0, 0, 0.02),
      23px 23px 18.5px rgba(0, 0, 0, 0.025),
      42px 42px 34.5px rgba(0, 0, 0, 0.03),
      101px 101px 81px rgba(0, 0, 0, 0.04); */
  }

  @for $i from 2 through 6 {
    > *:nth-child(#{$i}) {
      z-index: #{7 - $i};
    }
  }
}


.recPostRepeater {
  display: flex;
  width: 320px;
  padding-bottom: 64px;
  flex-direction: column;
  align-items: flex-start;
  //background-color: #ffffff;
  background: rgba(255, 255, 255, 0.80);
  border-radius: 7px;
  position: relative;
  //border: 1px solid var(--Night-100, #F0EEEE);
  transition: transform 0.5s ease-in, box-shadow 0.5s ease-out;
}

.recPostRepeater:hover {
  background-color: #FFF !important;
  box-shadow:
    2.8px 2.8px 2.2px rgba(0, 0, 0, 0.008),
    6.7px 6.7px 5.3px rgba(0, 0, 0, 0.012),
    12.5px 12.5px 10px rgba(0, 0, 0, 0.015),
    22.3px 22.3px 17.9px rgba(0, 0, 0, 0.018),
    41.8px 41.8px 33.4px rgba(0, 0, 0, 0.022),
    100px 100px 80px rgba(0, 0, 0, 0.03)
    ;
  transform: scale(1.05);
}

.recPostFeaturedImage img {
  height: 180px;
  object-fit: cover;
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
  width:100%;
  aspect-ratio: 16/9;
}
a.recPost-topic {
  font-variant-numeric: oldstyle-nums proportional-nums;
  font-family: Poppins !important;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 120%;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  text-decoration: none;
  display:flex;
  margin-bottom:12px;
}
.recPostFeaturedImage a {
  display: flex;
}
.recPostTitle a {
  font-kerning: none;
  font-variant-numeric: oldstyle-nums proportional-nums;
  font-feature-settings: 'liga' off;
  font-family: Poppins !important;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
  text-decoration: none;
  display: flex;
}
.recPostAuthorDate .date {
  font-variant-numeric: oldstyle-nums proportional-nums;
  font-family: Poppins !important;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
}
.readMin {
  font-variant-numeric: oldstyle-nums proportional-nums;
  font-family: Poppins !important;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
}
.recPostTopicHeadAuthor {
  padding: 20px 24px 0px 24px;
}
.recPostTitle {
  margin-bottom: 20px;
}
.authorDate {
  display: flex;
  align-items: center;
  gap:10px;
}
.recPostAuthorDateReadMin {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap:10px;
  position: absolute;
  bottom: 24px;
}
.authorDate a.author-link {
  display: flex;
  height: 50px;
}
span.reading-minutes {
  gap: 10px;
  display: flex;
  align-items: center;
}
.recPostTitle a:hover {
  text-decoration: underline;
}
.recPostButtonOuter {
  text-align:center;
  margin-top: 40px;
}
.recPostButtonOuter a {  
  font-family: "Space Grotesk" !important;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 22.647px;
  letter-spacing: 1.8px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.recPostButtonOuter a svg {  
  margin-left:10px;
}


@media screen and (max-width: 350px) {
  .recPostRepeater {
    width:300px;
  }

}