.cards {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;

  flex-wrap: wrap;
  gap: 2rem;
  padding: 2rem;
}

.cards h3,
.cards p {
  text-align: center;
  filter: var(--filter-shadow);
}

/* Example card block usage:
  <section class="cards cards-with-banner">
    <a href="creative-spaces.html">
      <div class="card creative-spaces-card">
        <h3>CREATIVE SPACES</h3>
        <p>Our Flagship Production Facility.</p>
      </div>
    </a>
    <a href="tape-30.html">
      <div class="card tape-30-card">
        <h3>TAPE 30</h3>
        <p>Our Video Production Services.</p>
      </div>
    </a>
  </section>
*/

.card {
  height: 10rem;
  width: 20rem;
  padding: 2rem;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  filter: var(--filter-shadow);
  border-width: 0.2rem;
  border-color: var(--secondary-color);
  border-style: solid;
  background-blend-mode: darken;
  background-size: cover;
  background-color: hsla(0, 0%, 0%, 0.66);
  cursor: pointer;
  transition: 0.1s ease-in-out;
  position: relative;
}

.cards-with-banner {
  margin-top: -5rem;
}

.card:hover {
  transform: scale(1.05) translateY(-0.5rem);
  overflow: hidden;
}
.card:hover::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent 0%,
    hsla(0, 0%, 100%, 0.1) 50%,
    transparent 100%
  );
  opacity: 0.7;
  pointer-events: none;
  animation: shine-across 0.7s forwards;
}

.tape-30-card {
  background-image: url("/imgs/card-bg-images/tape-30-card.jpg");
}
.simple-suite-card {
  background-image: url("/imgs/card-bg-images/simple-suite-card.jpg");
}
.creative-spaces-card {
  background-image: url("/imgs/banners/creative-spaces-banner.jpg");
}