.whats-happening .whats-happening-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  grid-auto-flow: dense;
  column-gap: 1vw;
  row-gap: 1vw;
  justify-items: stretch;
  align-items: stretch;
}
.whats-happening .whats-happening-grid > div {
  display: grid;
}

.whats-happening .whats-happening-grid div:nth-child(8n+1) {
  grid-row: span 3;
  grid-column: span 2;
}
.whats-happening .whats-happening-grid div:nth-child(8n+2) {
  grid-row: span 2;
  grid-column: span 1;
}
.whats-happening .whats-happening-grid div:nth-child(8n+3) {
  grid-row: span 2;
  grid-column: span 1;
}
.whats-happening .whats-happening-grid div:nth-child(8n+4) {
  grid-row: span 1;
  grid-column: span 2;
}
.whats-happening .whats-happening-grid div:nth-child(8n+5) {
  grid-row: span 2;
  grid-column: span 1;
}
.whats-happening .whats-happening-grid div:nth-child(8n+6) {
  grid-row: span 2;
  grid-column: 2/span 1;
}
.whats-happening .whats-happening-grid div:nth-child(8n+7) {
  grid-row: span 1;
  grid-column: 1/span 2;
}
.whats-happening .whats-happening-grid div:nth-child(8n+8) {
  grid-row: span 3;
  grid-column: span 2;
}

.whats-happening-video-card {
  display: block;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.whats-happening-video-card .play-icon-overlay {
  display: flex;
  position: absolute;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  font-size: 4vw;
  color: #fff9;
  transition: color 0.3s ease-in-out, font-size 0.3s ease-in-out;
  z-index: 1;
}
.whats-happening-video-card:hover .play-icon-overlay {
  color: #fffc;
  font-size: 5vw;
}
.whats-happening-video-card .whats-happening-card-bg-img {
  transition: transform 0.3s ease-in-out;
  background-size: cover;
  background-position: center;
  position: absolute;
  width: 100%;
  height: 100%;
}
.whats-happening-video-card:hover .whats-happening-card-bg-img {
  transform: scale(1.03);
}

.whats-happening-thumb {
  background-size: cover;
  background-position: center;
  text-shadow: 1px 1px var(--midnight);
  display: flex;
  align-items: end;
}

.whats-happening-text-strip {
  background-size: cover;
  background-position: right;
  background-image: url(/themes/fwrd/images/backgrounds/text-strip-bg.jpg);
  text-shadow: 1px 1px var(--midnight);
  display: flex;
  align-items: end;
}

@media only screen and (max-width: 600px) {
  .whats-happening .whats-happening-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .whats-happening .whats-happening-grid div:nth-child(8n+1) {
    grid-row: span 2;
    grid-column: span 2;
  }
  .whats-happening .whats-happening-grid div:nth-child(8n+2) {
    grid-row: span 2;
    grid-column: span 1;
  }
  .whats-happening .whats-happening-grid div:nth-child(8n+3) {
    grid-row: span 2;
    grid-column: span 1;
  }
  .whats-happening .whats-happening-grid div:nth-child(8n+4) {
    grid-row: span 1;
    grid-column: span 2;
  }
  .whats-happening .whats-happening-grid div:nth-child(8n+5) {
    grid-row: 8/span 2;
    grid-column: span 1;
  }
  .whats-happening .whats-happening-grid div:nth-child(8n+6) {
    grid-row: 8/span 2;
    grid-column: span 1;
  }
  .whats-happening .whats-happening-grid div:nth-child(8n+7) {
    grid-row: 10/span 1;
    grid-column: span 2;
  }
  .whats-happening .whats-happening-grid div:nth-child(8n+8) {
    grid-row: 6/span 2;
    grid-column: span 2;
  }
}