.post-loop-wrap {
--grid-layout-horizontal-gap: 22px;
--grid-column-count: 1;
--grid-item--min-width: 325px;
--gap-count: calc(var(--grid-column-count) - 1);
--total-gap-width: calc(var(--gap-count) * var(--grid-layout-horizontal-gap));
--grid-item--max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count));
display: grid;
grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr));
grid-gap: 22px var(--grid-layout-horizontal-gap);
}
.post-loop-wrap.cols-2 {
--grid-column-count: 2;
}
.post-loop-wrap.cols-3 {
--grid-column-count: 3;
}
.post-loop-wrap.cols-4 {
--grid-column-count: 4;
}
.post-loop-wrap.cols-5 {
--grid-column-count: 5;
}
.post-loop-wrap article {

}
.post-loop-wrap article a {
  display: inline-block;
}
.post-loop-wrap article .entry-image-link {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
}
.post-loop-wrap article .post-content-container {
  background: #fff;
  height: 100%;
}
.post-loop-wrap article .post-content-wrap {
  padding: 30px 20px;
}

.post-loop-wrap article img {
  aspect-ratio: 360 / 203;
  object-fit: cover;
  width: 100%;
}
.post-loop-wrap .post-title {
  font-size: 1.1em;
}
.post-loop-wrap article .post-date {
  font-style: italic;
  position: relative;
  display: block;
  margin-bottom: 20px;
    font-size: 14px;
}
.post-loop-wrap article .post-excerpt  {
  font-size: 14px;
}
.post-loop-wrap article .post-title {
  transition: all 0.3s ease;
}
.post-loop-wrap article .post-title:hover {
  color: #44546a;
}
.post-loop-wrap article .entry-image-link::before {
  content: "";
  position: absolute;
  background: url("/wp-content/uploads/2024/07/plus-icon.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 40px 40px;
    background-color: rgba(68, 84, 106, 0.85);
height: 100%;
  width: 100%;
  z-index: 2;
  opacity: 0;
  transition: all 300ms ease-out;
}
.post-loop-wrap article .entry-image-link:hover::before {
opacity: 1;
}

@media all and (max-width: 480px) {
.post-loop-wrap {
  --grid-item--min-width: 100%;
}
}