@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700&display=swap");
@import url(https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.css);
/*===== VARIABLES CSS =====*/
:root {
  --header-height: 3rem;
  --font-medium: 500;
}
/*===== Colores =====*/
:root {
  --first-color: #49a687;
  --complementary-color: #f99d6e;
  --white-color: #fafaff;
  --dark-color: #2a3b47;
  --text-color: #697477;
  --white-color-glass: rgba(250, 250, 255, 0.4);
}
/*===== Fuente y tipografia =====*/
:root {
  --body-font: "Montserrat", sans-serif;
  --big-font-size: 6.25rem;
  --h2-font-size: 1.25rem;
  --normal-font-size: 0.938rem;
  --small-font-size: 0.813rem;
}

*{
    font-family: 'Poppins', sans-serif;
}

section.res__gallery {
  padding: 20px;
  width: 100%;
  display: flex;
  justify-self: center;
  align-items: center;
  flex-direction: column;
  margin: 0 auto;
}
section.res__gallery ul {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
section.res__gallery ul li {
  list-style: none;
  background: var(--first-color);
  color: var(--white-color);
  font-size: var(--h2-font-size);
  padding: 12px 20px;
  margin: 5px;
  letter-spacing: 1px;
  cursor: pointer;
  -ms-user-select: None;
  -moz-user-select: None;
  -webkit-user-select: None;
  user-select: None;
}
section.res__gallery ul li.active {
  background: var(--complementary-color);
  color: var(--white-color);
}
.product {
  /* display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  -ms-user-select: None;
  -moz-user-select: None;
  -webkit-user-select: None;
  user-select: None; */

  display: grid;
  grid-template-columns: repeat(5,1fr);
  grid-template-rows: auto;
  justify-items: center;
  grid-gap: 2rem;
}
@media(max-width:1200px){
    .product{
        grid-template-columns: repeat(4,1fr);
    }
}
@media(max-width:910px){
    .product{
        grid-template-columns: repeat(3,1fr);
    }
}
@media(max-width:700px){
    .product{
        grid-template-columns: repeat(2,1fr);
        grid-gap: 1rem;
        margin: 0 0.5rem;
    }
}
@media(max-width:450px){
  .product{
      grid-template-columns: repeat(2,1fr);
      grid-gap: 0.2rem;
      margin: 0 0.5rem;
  }
}
.product .itembox {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 5px;
  display: block;
}
.product .itembox.hide {
  display: none;
}
.product .itembox img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media(max-width:450px){
  .product .itembox {
    position: relative;
    width: 150px;
    height: 150px;
    margin: 5px;
    display: block;
  }
}

a[data-fancybox] img {
  cursor: zoom-in;
}

/* div[data-item="category0"] {
    display: none !important;
} */