.banner-beers-exclusive{

  width: 100%;

  background-position: center;

  background-repeat: no-repeat;

  background-size: cover;

}



.banner-beers-exclusive .container{

  max-width: var(--container);

  margin: 0 auto;  

  display: flex;

  align-items: center;

  justify-content: center;

  flex-direction: column;

  min-height: 39.375rem;

}



.banner-beers-exclusive .container h1{

  font-family: var(--font-family-gin-regular);

  font-style: normal;

  font-weight: 400;

  font-size: 3.75rem;

  line-height: 4.25rem;

  color: var(--opa-marrom-claro);

  margin-bottom: 0;

}



.banner-beers-exclusive .container h2{

  font-family: var(--font-family-gin-regular);

  font-style: normal;

  font-weight: 400;

  font-size: 2.625rem;

  line-height: 3.125rem;

  color: var(--opa-amarelo);

  margin-bottom: 5rem;

  text-align: center;

}



.banner-beers-exclusive .container .awards{

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 3rem;

}



.exclusives-products-container{

  width: 100%;

  max-width: var(--container);

  margin: 0 auto;  

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 2rem;

  margin-top: -3rem;

}



.exclusives-products-container .item{

  width: 100%;

  min-height: 24.375rem;

  border-radius: 1.25rem;

  display: flex;

  padding-top: 10%;

  align-items: center;

  flex-direction: column;

  position: relative;

  z-index: 99;

  margin-bottom: 20rem;

}



.exclusives-products-container .item:after{

  content: '';

  filter: brightness(0) saturate(100%) invert(4%) sepia(74%) saturate(6280%) hue-rotate(330deg) brightness(97%) contrast(98%);

  background-image: url(/wp-content/themes/labbotheme/assets/svg/beers-exclusive-bg.svg);

  background-repeat: no-repeat;

  background-position: center center;

  background-size: contain;

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  width: 90%;

  height: 90%;

  z-index: 99;

  opacity: 0.4;

}



.exclusives-products-container .item:before{

  content: '';

  background: linear-gradient(180deg, #ffffff 50%, rgba(255, 255, 255, 0.76) 40%);

  filter: blur(100px);

  width: 60%;

  height: 60%;

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  z-index: 0;

}



.exclusives-products-container .item .title{

  font-family: var(--font-family-gin-regular);

  font-style: normal;

  font-weight: 400;

  font-size: 1.5rem;

  line-height: 1.813rem;

  color: var(--opa-branco);

  margin-bottom: 2rem;

  position: relative;

  z-index: 9999;

}



.exclusives-products-container .item figure{

  z-index: 100;

}



.exclusives-products-container .item figure img{

  position: absolute;

  object-fit: contain;

  z-index: 99999;

  left: 10px;

  right: 10px;

  margin-left: auto;

  margin-right: auto;

  max-height: 460px;

}



.exclusives-products-container .item .shop{

  position: absolute;

  height: auto;

  object-fit: contain;

  z-index: 99999;

  left: 10px;

  right: 10px;

  margin-left: auto;

  margin-right: auto;

  top: 145%;

}



.exclusives-products-container .item .shop figure{

  z-index: 100;

  height: 5.625rem;

  display: flex;

  align-items: center;

}



.exclusives-products-container .item .shop figure img{

  max-height: 150px;

  max-width: 120px;

  object-fit: contain;

}

@media (max-width: 1366px) {

  .exclusives-products-container {

    gap: 10rem 2rem;

  }

  .exclusives-products-container .item .shop {

    top: 180%;

  }

}

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

  .banner-beers-exclusive .container h1{

    text-align: center;

  }

  .banner-beers-exclusive .container .awards{

    gap: 0rem;

  }

  .banner-beers-exclusive .container .awards .item{

    display: inline-block;

    text-align: center;

  }

  .banner-beers-exclusive .container .awards .item img{

    width: 60%;

  }

  .exclusives-products-container{

    grid-template-columns: repeat(2, 1fr);

    padding: 0 1rem;

  }

  .exclusives-products-container {

    gap: 3rem 2rem;

  }

  .exclusives-products-container .item{

    margin-bottom: 30rem;

  }

  .exclusives-products-container .item .shop{

    top: 189%;

  }



}



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

    .exclusives-products-container {

      grid-template-columns: repeat(1, 1fr);

    }

    .exclusives-products-container .item .shop {

      top: 175%;

    }

}