header {
  position: absolute;
  z-index: 1000;
  top: 0;
  left: 0;
  background: rgb(0,0,0);
  background: linear-gradient(0deg, rgba(0,0,0, 0) 0%, rgba(0,0,0, 1) 100%);
}
  header a.logo {
    background-image: url('../svg/booztbuddy-logo-inv.svg');
  }
  header .nav-tgl {
    background-color: rgba(255,255,255, .6);
  }
    header .nav-tgl:hover {
      background-color: rgba(255,255,255, 1);
    }

  header nav > ul li a {
    color: #aaa;
  }
  header nav > ul li a:hover {
    color: #fff;
  }
  header nav > ul li.c a {
    color: #42b6ef;
  }

  header ul#ql li.crncy_switch a span b {
    color: rgba(255,255,255, .6);
  }
  header ul#ql li.crncy_switch a:hover span b {
    color: rgba(255,255,255, 1);
  }
  header ul#ql li.crncy_switch a span svg {
    color: rgba(255,255,255, .6);
  }
  header ul#ql li.crncy_switch a:hover span svg {
    color: rgba(255,255,255, 1);
  }

  header ul#ql li.search a svg,
  header ul#ql li.user a svg {
    color: rgba(255,255,255, .6);
  }
    header ul#ql li.search:hover a svg,
    header ul#ql li.user:hover a svg {
      color: #fff;
    }

  header ul#ql li.cart a svg {
    color: rgba(255,255,255, .6);
  }
    header ul#ql li.cart:hover a svg {
      color: #fff;
    }

#hero {
  position: relative;
  width: 100%;
  aspect-ratio: 2;
  background-color: #000;
  background-position: top right;
}
#hero.tb {
  margin-top: 40px;
}
  #hero .txt {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    text-align: center;
  }
    #hero .txt h2 {
      color: #fff;
      text-shadow: 3px 3px 8px rgba(0,0,0, .3);
      padding: 0;
      margin: 0 0 20px;
    }
    #hero .txt a.btn {

    }


.products_title {
  background-color: #fff;
  text-align: center;
  padding: 50px 0 0;
  margin: 0 0 -30px;
}
  .products_title h2 {
    padding: 0;
    margin: 0 0 5px;
  }
  .products_title .subtitle {
  }

section.grid.products {
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 0;
  align-items: start;
  justify-content: center;
  background-color: #fff;
  border: none;
  padding: 0 0 40px;
  margin: 0;
}
  section.grid.products .prod {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
  }
    section.grid.products .prod .cvr {
      width: 100%;
      padding: 40px 20px 30px;
    }
      section.grid.products .prod a.cover {
        display: block;
        width: 100%;
        aspect-ratio: 1.7;
        background-position: center center;
        background-size: contain;
        background-repeat: no-repeat;
        transition: .2s all;
        margin: 0 auto;
      }
      section.grid.products .prod:hover a.cover {
      }
    section.grid.products .prod .content {
      text-align: center;
      padding: 0 10px;
    }
      section.grid.products .prod .content a h3 {
        font-size: 1.1rem;
        padding: 0;
        margin: 0 0 5px;
      }
        section.grid.products .prod .content a:hover h3 {
          color: #41b5ee;
        }
      section.grid.products .prod .content .price {
        font-size: .75rem;
        color: #999;
      }




@media screen and (max-width: 1600px){
  section.grid.products .prod .content a h3 {
    font-size: .9rem;
    margin: 0;
  }
}

@media screen and (max-width: 1400px){

}



@media screen and (max-width: 1200px){
  header nav ul li a {
    color: #666;
  }
  header nav ul li:hover a {
    color: #000;
  }
  header nav ul li.c a {
    color: #000;
  }

  .products_title {
    padding: 30px 0 20px;
    margin: 0;
  }
  section.grid.products {
    grid-template-columns: 1fr 1fr;
    padding: 0;
  }
    section.grid.products .prod {
      padding: 0 0 30px;
    }
    section.grid.products .prod:nth-child(3n + 1) {
      background-color: rgba(0,0,0, .02);
    }
      section.grid.products .prod .cvr {
        padding: 15px 20px 15px;
      }
        section.grid.products .prod a.cover {
          aspect-ratio: 2.5;
        }
}


@media screen and (max-width: 900px){
  section.grid.products .prod a.cover {
    aspect-ratio: 1.8;
  }
}


@media screen and (max-width: 800px){
  #hero {
    aspect-ratio: 1.5;
  }
    #hero .txt h2 {
      font-size: 1.2rem;
      line-height: 1.4rem;
      margin: 0 0 15px;
    }
    #hero .txt .btn {
      font-size: .8rem;
      padding: 9px 18px;
    }
  section.grid.products {
    display: grid;
  }
}


@media screen and (max-width: 600px){
  #hero {
    aspect-ratio: 1.5;
  }
    #hero .txt {
      padding: 20px 0 0 0;
    }
  section.grid.products {
    grid-template-columns: 1fr;
    padding: 0;
  }
    section.grid.products .prod:first-child {
      background-color: transparent;
    }
    section.grid.products .prod:nth-child(even) {
      background-color: rgba(0,0,0, .02);
    }
    section.grid.products .prod a.cover {
      aspect-ratio: 2;
    }
}


@media screen and (max-width: 500px){
  #hero {
    aspect-ratio: 1.3;
  }
}