/* --------------- GAMES --------------- */

.games{
    grid-column: col-start / span 12;
    padding-top: 60px;
    padding-bottom: 60px;
    grid-row-start: 2;
    grid-row-end: 3;
    align-self: center;
    z-index: 2;
  }
  
  .games-content{
    display: grid;
    grid-row-gap: 30px;
    grid-column-gap: 30px;
  }

  iframe{
    height: 315px;
  }

  img{
    position: relative;
    cursor: pointer;
  }

  i{
      cursor: pointer;
      pointer-events: none;
  }

  .games-content img{
    width: 100%;
  }

  .hero-image{
    grid-column: col-start / span 12;
    z-index: 1; 
    grid-row-start: 2;
    grid-row-end: 3;
}

  .bannervideo{
    display: none;
  }

  .top-right {
    position: absolute;
    top: 16px;
    right: 16px;
}
 
  .img-test{
        /* Position and center the image to scale nicely on all screens */
    object-fit: cover;
        height: 320px;
  }

  @media (min-width: 300px) {
  
    .wrapper{
      grid-template-rows: 60px auto auto;
      grid-template-columns: 1fr;    
    }



  }
  
  @media (min-width: 768px) {
    .wrapper{
      grid-template-rows: 60px auto 240px;
    }
  }

  @media (min-width: 1024px) {
    .wrapper{
      grid-template-columns: repeat(12, [col-start] 1fr);
      grid-template-rows: 60px auto 220px;
    }
  }

  @media (min-width: 1680px) {
 
    .games-content{
      grid-template-columns: 1fr 1fr;    
    }

  }

  @media (min-width: 1921px) {
 
    .wrapper{
      grid-template-columns: repeat(12, [col-start] 1fr);
      grid-template-rows: 60px auto 240px;
    }
  }