/* .demo{
  position: relative;
  width: calc(100% + 12px);
  display: block;
  text-align: center;
  text-decoration: none;
   
  font-weight: 300;
  font-style: italic;

  color:rgb(53, 32, 41);
  z-index: 1;

  box-shadow: -8px 0 0 0 orange;
}

.demo::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 100%;
  margin-left: auto;
  margin-right: auto;

  background: var(--col_hl);
  z-index: -1;
  
}

.demo::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 100%;
  margin-left: auto;
  margin-right: auto;

  background: rgba(0, 0, 0, 0.313);
  z-index: -2;
  transform: translate(2px, 2px);
  visibility: hidden;
}


.demo:hover {
box-shadow: -8px 0 0 0 rgb(255, 222, 114);
}
.demo:hover::after {
  visibility: visible;
} */

/* .game-description
{
  
  background-color: var(--bg);
  /* border-radius: 8px; */
  


.game-description > a{
text-align: center;
 position: relative;
  display: block;

} 

h3{

  /* scroll-snap-align: start; */
  /* scroll-margin-top: 100px; */

  text-align: center;
  margin-bottom: 8px;
}

  .game-banner img{
    width: 100%;
    height: 558px;
    object-fit: contain;
    display: block;
    
      background:
    radial-gradient(
      ellipse at center,
      rgba(255, 255, 255, 0.2) 0%,
      rgba(0, 0, 0, 0.25) 60%,
      rgba(0, 0, 0, 0.65) 100%
    ),
    rgb(54, 54, 54);
  }

.banner-caption {
  position: absolute;
  bottom: 0%;
}

.blurview  {
  position: absolute;
  z-index: -10;
  width: 100%;
  height: 100%;
  /* background-color: red; */
  border-radius: 8px;

  pointer-events: none;

  /* edge mask */

}

/* edge boost */
.edgeBlur {
  -webkit-mask:
    linear-gradient(to right,  black, transparent) left,
    linear-gradient(to left,   black, transparent) right,
    linear-gradient(to bottom, black, transparent) top,
    linear-gradient(to top,    black, transparent) bottom;
    
  -webkit-mask-size: 40px 100%, 40px 100%, 100% 40px, 100% 40px;
  -webkit-mask-repeat: no-repeat;

  mask:
    linear-gradient(to right,  black, transparent) left,
    linear-gradient(to left,   black, transparent) right,
    linear-gradient(to bottom, black, transparent) top,
    linear-gradient(to top,    black, transparent) bottom;

  mask-size: 40px 100%, 40px 100%, 100% 40px, 100% 40px;
  mask-repeat: no-repeat;

  backdrop-filter: blur(4px) brightness(101%);
}


.baseBlur{
  backdrop-filter: blur(2px);
}



.games-grid
{
    position: relative;
    display: flex;
    flex-direction: row;
    /* gap: 2rem; */
    gap: clamp(1vw, 1vw, 2rem);
    align-items: stretch;
    /* align-items: flex-start; */
      justify-content: center;
    padding-left: 1vw;
    padding-right: 1vw;

   overflow: visible;
}

/* .grid::before
{
    content: "";

    position: absolute;

    left: 0;
    right: 0;

    top: 40px;
    bottom: 40px;

    background: var(--darker);

    z-index: -1;
} */

.game-box
{
    text-decoration: none;

    transform-origin: center center;
    flex: 1 1 0;
    max-width: 490px;
    min-width: 0;

    display: flex;
    flex-direction: column;

    /* padding: 1rem; */

    border-radius: 2px;

    background: white;
    /* border: 1px solid rgba(255,255,255,1.08); */

    box-shadow:
        0px 0px 0px rgba(0, 0, 0, 0.10);

    transform: scale(1);

        transition:
        transform 0.05s ease-out,
        box-shadow 0.05s ease-out;

    cursor:pointer;
    overflow: hidden;


}

.game-box:hover
{
    transform: scale(1.03);
    box-shadow:
    6px 12px 0px rgba(0, 0, 0, 0.10);
    transition-timing-function: cubic-bezier(0.3, 1, 0.6, 1.5);
  }

.banner-img
{
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.game-content
{
    display: flex;
    flex-direction: column;
    gap: 16px;

    padding: 24px;
}

.game-content h3
{
    margin: 0;

    font-size: 1.5rem;
    font-weight: 600;
}


/* =========================================
   DESKTOP
========================================= */

.game-description {
  margin-bottom: 8px;
  z-index:100;
  background-color: rgb(255, 255, 255);
}

.hasDemo{
  visibility: hidden;
  position: relative;
  top: -4rem;
  height: 4rem;
  margin-bottom: -4rem;
  /* background-color: red; */
  text-align: right;
  padding-right: 8px;
  transform: translateY(100px);
  transition: transform 0.1s ease;
  overflow: hidden;
    padding-top:2rem;
}


.hasDemo::before
{
    content: "";

    position: absolute;

    width: 400px;
    height: 80px;

    left: 20%;
    top: 50%;

    background: rgb(255, 255, 255);

    transform: rotate(-3deg);

    pointer-events: none;
    z-index: -1;
  

  
    mask-image: url("images/halftone.png");
    mask-repeat: no-repeat;
    mask-size: cover;
    mask-position: center;

    -webkit-mask-image: url("images/halftone.png");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: cover;
    -webkit-mask-position: center;
  }



.game-box:hover .hasDemo{
  visibility: visible;
  transform: translateY(0px);
}

.game-box:hover .hasDemo::before
{
    animation: demoStripeIn2 0.25s ease-out forwards;
}
@keyframes demoStripeIn
{
    from
    {
        transform: rotate(-12deg) translateX(-40px);
    }

    to
    {
        transform: rotate(-3deg) translateX(0);
    }
}

@keyframes demoStripeIn2
{
    0%
    {
        transform: rotate(-12deg) translateX(-40px);
    }

    80%
    {
        transform: rotate(-2deg) translateX(1px);
    }

    100%
    {
        transform: rotate(-3deg) translateX(0);
    }
}
/* .game-box::before{

    content: "";
    position: absolute;
    inset: 0;

    background-image:
        radial-gradient(
            rgba(50, 172, 131, 0.438) 1px,
            transparent 1px
        );

    background-size: 10px 10px;

    mask-image:
        radial-gradient(
            circle at top right,
            black,
            transparent 70%
        );

    pointer-events: none;
    z-index: -1 ;
} */

/* =========================================
   MOBILE
========================================= */

@media (max-width: 1450px)
{
  .game-box.active {
    flex-direction: column;
  }

  
  .game-description {
    width: 100%;
  }
}