<div class="gs-cards-container">
  <div class="gs-cards-grid">
    <a class="gs-card" style="background-image: url(https://m.media-amazon.com/images/M/MV5BMmIwZDMyYWUtNTU0ZS00ODJhLTg2ZmEtMTk5ZmYzODcxODYxXkEyXkFqcGdeQXVyMTEyMjM2NDc2._V1_.jpg)">
      <div class="gs-card-data">
        <div class="gs-card-over-header">
          Movie
        </div>
        <div class="gs-card-header">
          Top Gun: Maverick
        </div>
        <div class="gs-card-content">
          After more than thirty years of service as one of the Navy's top aviators, Pete Mitchell is where he belongs, pushing the envelope as a courageous test pilot and dodging the advancement in rank that would ground him.
        </div>
      </div>
    </a>

    <a class="gs-card" style="background-image: url(https://m.media-amazon.com/images/M/MV5BZjBlMjIxN2ItNTMyNi00NDk5LWFhMzEtNzdiODE0Y2M4MWI2XkEyXkFqcGdeQXVyMTM1MTE1NDMx._V1_.jpg)">
      <div class="gs-card-data">
        <div class="gs-card-over-header">
          Movie
        </div>
        <div class="gs-card-header">
          Chip 'n Dale: Rescue Rangers
        </div>
        <div class="gs-card-content">
          Thirty years after their popular television show ended, chipmunks Chip and Dale live very different lives. When a cast member from the original series mysteriously disappears, the pair must reunite to save their friend.
        </div>
      </div>
    </a>

    <a class="gs-card" style="background-image: url(https://m.media-amazon.com/images/M/MV5BODZlYjQ4NzYtZTg1MC00NGY4LTg4NjQtNGE3ZjRkMjk3YjMyXkEyXkFqcGdeQXVyMTkxNjUyNQ@@._V1_FMjpg_UX1000_.jpg)">
      <div class="gs-card-data">
        <div class="gs-card-over-header">
          Tv Show
        </div>
        <div class="gs-card-header">
          Stranger Things
        </div>
        <div class="gs-card-content">
          When a young boy disappears, his mother, a police chief and his friends must confront terrifying supernatural forces in order to get him back.
        </div>
      </div>
    </a>

    <a class="gs-card" style="background-image: url(https://m.media-amazon.com/images/M/MV5BYmMxZWRiMTgtZjM0Ny00NDQxLWIxYWQtZDdlNDNkOTEzYTdlXkEyXkFqcGdeQXVyMTkxNjUyNQ@@._V1_.jpg)">
      <div class="gs-card-data">
        <div class="gs-card-over-header">
          Movie
        </div>
        <div class="gs-card-header">
          Thor: Love and Thunder
        </div>
        <div class="gs-card-content">
          Thor enlists the help of Valkyrie, Korg and ex-girlfriend Jane Foster to fight Gorr the God Butcher, who intends to make the gods extinct.
        </div>
      </div>
    </a>

    <a class="gs-card" style="background-image: url(https://m.media-amazon.com/images/M/MV5BYTRiNDQwYzAtMzVlZS00NTI5LWJjYjUtMzkwNTUzMWMxZTllXkEyXkFqcGdeQXVyNDIzMzcwNjc@._V1_.jpg)">
      <div class="gs-card-data">
        <div class="gs-card-over-header">
          Tv Show
        </div>
        <div class="gs-card-header">
          Game of Thrones
        </div>
        <div class="gs-card-content">
          Nine noble families fight for control over the lands of Westeros, while an ancient enemy returns after being dormant for millennia.
        </div>
      </div>
    </a>

    <a class="gs-card" style="background-image: url(https://resizing.flixster.com/SAICgriG0MpGYUlj7YaLj69cIUY=/ems.ZW1zLXByZC1hc3NldHMvdHZzZWFzb24vUlRUVjczNzIyNC53ZWJw)">
      <div class="gs-card-data">
        <div class="gs-card-over-header">
          Tv Show
        </div>
        <div class="gs-card-header">
          The Boys
        </div>
        <div class="gs-card-content">
          A group of vigilantes set out to take down corrupt superheroes who abuse their superpowers.
        </div>
      </div>
    </a>

    <a class="gs-card" style="background-image: url(https://m.media-amazon.com/images/M/MV5BMDdmMTBiNTYtMDIzNi00NGVlLWIzMDYtZTk3MTQ3NGQxZGEwXkEyXkFqcGdeQXVyMzMwOTU5MDk@._V1_.jpg)">
      <div class="gs-card-data">
        <div class="gs-card-over-header">
          Movie
        </div>
        <div class="gs-card-header">
          The Batman
        </div>
        <div class="gs-card-content">
          When a sadistic serial killer begins murdering key political figures in Gotham, Batman is forced to investigate the city's hidden corruption and question his family's involvement.
        </div>
      </div>
    </a>

    <a class="gs-card" style="background-image: url(https://www.sonypictures.com/sites/default/files/styles/max_560x840/public/title-key-art/morbius_onesheet_1400x2100_he.jpg?itok=-jQVkWIe)">
      <div class="gs-card-data">
        <div class="gs-card-over-header">
          Movie
        </div>
        <div class="gs-card-header">
          Morbius
        </div>
        <div class="gs-card-content">
          Biochemist Michael Morbius tries to cure himself of a rare blood disease, but he inadvertently infects himself with a form of vampirism instead.
        </div>
      </div>
    </a>

    <a class="gs-card" style="background-image: url(https://sysfilessacbe149174fee.blob.core.windows.net/public-container/clients/worthingtheatres/files/d3f93c44-f477-4079-96db-14c2ef40a5f5.jpg)">
      <div class="gs-card-data">
        <div class="gs-card-over-header">
          Movie
        </div>
        <div class="gs-card-header">
          Sonic the Hedgehog 2
        </div>
        <div class="gs-card-content">
          When the manic Dr Robotnik returns to Earth with a new ally, Knuckles the Echidna, Sonic and his new friend Tails is all that stands in their way.
        </div>
      </div>
    </a>

    <a class="gs-card" style="background-image: url(https://m.media-amazon.com/images/M/MV5BZmQ1NDZjMTktMjFhZC00ZGY5LWEyMTMtNDhkOWM4NmMyZjI0XkEyXkFqcGdeQXVyMTkxNjUyNQ@@._V1_.jpg)">
      <div class="gs-card-data">
        <div class="gs-card-over-header">
          Movie
        </div>
        <div class="gs-card-header">
          Jurassic World Dominion
        </div>
        <div class="gs-card-content">
          Four years after the destruction of Isla Nublar, dinosaurs now live--and hunt--alongside humans all over the world. This fragile balance will reshape the future and determine, once and for all, whether human beings are to remain the apex predators on a planet they now share with history's most fearsome creatures in a new Era.
        </div>
      </div>
    </a>
  </div>
</div>

:root {
  --cards-column-gap-gs-blur-cards: 24px;
  --cards-row-gap-gs-blur-cards: 24px;
  --card-max-height-gs-blur-cards: 400px;
  --card-min-height-gs-blur-cards: 200px;
  --card-over-header-color-gs-blur-cards: rgba(255, 255, 255, 0.6);
  --card-header-color-gs-blur-cards: rgba(255, 255, 255, 0.9);
  --card-content-color-gs-blur-cards: white;
  --card-hover-transition-speed-gs-blur-cards: 0.3s;
  --card-header-font-size-gs-blur-cards: 1.5rem;
  --card-over-header-font-size-gs-blur-cards: 0.9rem;
  --card-container-padding-gs-blur-cards: 30px;
  --card-scroll-thumb-color-gs-blur-cards: #1b1b1b;
  --card-scroll-thumb-hover-color-gs-blur-cards: #141414;
  --card-on-hover-border-size-gs-blur-cards: 3px;
  --card-data-text-shadow-gs-blur-cards: black 1px 0 10px;
  --card-border-radius-gs-blur-cards: 10px;
}

* {
  margin: 0;
}

.gs-cards-container {
  align-items: flex-start;
  display: flex;
  justify-content: center;
  padding: var(--card-container-padding-gs-blur-cards);
  background-image: linear-gradient(to right, #0f4667, #2a6973);
}

.gs-cards-container .gs-cards-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-column-gap: var(--cards-column-gap-gs-blur-cards);
  grid-row-gap: var(--cards-row-gap-gs-blur-cards);
  max-width: 100%;
  width: 100%;
}

@media only screen and (min-width: 320px) {
  .gs-cards-container .gs-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media only screen and (min-width: 540px) {
  .gs-cards-container .gs-cards-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media only screen and (min-width: 800px) {
  .gs-cards-container .gs-cards-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media only screen and (min-width: 1024px) {
  .gs-cards-container .gs-cards-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}
@media only screen and (min-width: 1900px) {
  .gs-cards-container .gs-cards-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

.gs-cards-container .gs-cards-grid .gs-card {
  display: block;
  width: 100%;
  min-height: var(--card-min-height-gs-blur-cards);
  height: 40vw;
  max-height: var(--card-max-height-gs-blur-cards);
  border-radius: var(--card-border-radius-gs-blur-cards);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  cursor: pointer;
  transition: var(--card-hover-transition-speed-gs-blur-cards);
  position: relative;
}

.gs-cards-container .gs-cards-grid .gs-card .gs-card-data {
  width: 90%;
  height: 95%;
  padding: 5%;
  border-radius: 10px;
  overflow-y: auto;
}

.gs-cards-container .gs-cards-grid .gs-card .gs-card-data .gs-card-header {
  color: var(--card-header-color-gs-blur-cards);
  font-size: var(--card-header-font-size-gs-blur-cards);
  line-height: 1.4;
  font-weight: bold;
  text-shadow: var(--card-data-text-shadow-gs-blur-cards);
}

.gs-cards-container .gs-cards-grid .gs-card .gs-card-data .gs-card-over-header {
  color: var(--card-over-header-color-gs-blur-cards);
  font-size: var(--card-over-header-font-size-gs-blur-cards);
  margin-bottom: var(--spacing-s);
  text-transform: uppercase;
  text-shadow: var(--card-data-text-shadow-gs-blur-cards);
}

.gs-cards-container .gs-cards-grid .gs-card:hover {
  transform: scale(1.05) translateZ(0);
}

.gs-cards-container .gs-cards-grid .gs-card:hover > .gs-card-data {
  background-color: #00000075;
}

.gs-cards-container .gs-cards-grid .gs-card.gs-card-blured {
  filter: blur(5px);
}

.gs-cards-container
  .gs-cards-grid
  .gs-card:hover
  > .gs-card-data
  .gs-card-content {
  opacity: 1;
  height: auto;
}

.gs-cards-container .gs-cards-grid .gs-card .gs-card-data .gs-card-content {
  color: var(--card-content-color-gs-blur-cards);
  word-wrap: break-word;
  width: 85%;
  padding-top: 10px;
  transition: opacity var(--card-hover-transition-speed-gs-blur-cards) ease-out;
  opacity: 0;
  height: 0;
  overflow: hidden;
  text-shadow: var(--card-data-text-shadow-gs-blur-cards);
}

.gs-cards-container .gs-cards-grid .gs-card .gs-card-data::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

.gs-cards-container
  .gs-cards-grid
  .gs-card
  .gs-card-data::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 5px;
}

.gs-cards-container
  .gs-cards-grid
  .gs-card
  .gs-card-data::-webkit-scrollbar-thumb {
  background: var(--card-scroll-thumb-color-gs-blur-cards);
  border-radius: 5px;
}

.gs-cards-container
  .gs-cards-grid
  .gs-card
  .gs-card-data::-webkit-scrollbar-thumb:hover {
  background: var(--card-scroll-thumb-hover-color-gs-blur-cards);
}

var allCards = document.getElementsByClassName("gs-card");

for (var i = 0; i < allCards.length; i++) {
  allCards[i].addEventListener("mouseover", changeBluredCard, false);
  allCards[i].addEventListener("mouseout", changeBluredCard, false);
}

function changeBluredCard() {
  let flag = true;
  for (var i = 0; i < allCards.length; i++) {
    if (allCards[i].matches(":hover")) {
      flag = false;
      allCards[i].classList.remove("gs-card-blured");
    } else {
      allCards[i].classList.add("gs-card-blured");
    }
  }

  if (flag) {
    for (var i = 0; i < allCards.length; i++) {
      allCards[i].classList.remove("gs-card-blured");
    }
  }
}