/* Hero Image */
.hero-image {
  background-image: url("../assets/ELEMENTS/ELEMENTS_PRODUCTOS-12.png");
  background-repeat: no-repeat;
  background-size: cover;

}

.container-hero-image {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100%;
}

.hero-image__title {
  width: 100%;
  height: 60%;
  display: flex;
  align-items: self-end;
  justify-content: center;
  /* border: 4px solid red; */
}

.hero-image__title>h1 {
  font-family: var(--font);
  font-size: var(--font-titles);
  color: white;
  text-align: center;
  text-transform: uppercase;
  font-style: italic;
  font-weight: 900;
}

.hero-image__img {
  width: 100%;
  height: 40%;
  display: flex;
  justify-content: flex-end;
  position: relative;
}

.hero-image__img>div {
  width: clamp(14rem, 20vw, 30rem);
  height: auto;
  position: absolute;
  right: 20px;
}

.hero-image__img>div>img {
  width: 100%;
  height: auto;
  right: 4rem;
}


/* PRODUCTOS */

.products {
  background-image: url("../assets/ELEMENTS_HOME/ELEMENTS_HOME-18.png");
  background-repeat: no-repeat;
  background-size: cover;
}

.products__container {
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: var(--margen-top);
}

.products__img {
  width: 100%;
  height: auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  place-items: center;
  gap: 1rem;
}

.products__img>div {
  width: 10rem;
}

.products__title {
  color: var(--first-color);
  font-family: var(--font);
  font-weight: 900;
  font-size: var(--font-titles-section);

}

.products__description {
  width: 100%;
  font-size: var(--font-subtitles-section);
  color: white;
  text-align: center;
  font-family: var(--font);
}

/* Seccion de galeria  */
.galery {
  background-color: white;
  height: auto;
  width: 100%;
  margin-top: 6.25rem;
}

.galery__title {
  color: var(--first-color);
  font-family: var(--font);
  text-align: center;
  font-size: var(--font-titles-section);
  font-weight: 900;

}

.galery__subtitle {
  text-align: center;
  font-family: var(--font);
  font-size: var(--font-subtitles-section);
}

.galery__productos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.galery__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem 0;
}

.galery__item>div>img {
  width: 14rem;
  height: 14rem;
  object-fit: cover;
  border-radius: 2rem;
}

.product__description,
.product__category,
.product__price {
  font-size: 1rem;
  text-align: center;
}

.product__category {
  color: var(--color-category);
  font-weight: 800;
}

.product__price {
  color: var(--first-color);
  font-weight: 900;
}


@media only screen and (min-width: 668px) and (max-width: 1248px) {

  .hero-image__img {
    /* border: 4px solid green; */
    justify-content: center;
    align-items: flex-start;
    position: static;
    height: 50%;
  }

  .hero-image__img>div {
    position: static;
    /* border: 4px solid gold; */
  }

  .galery__item>div>img {
    width: 10rem;
    height: 10rem;
    object-fit: cover;
    border-radius: 2rem;
  }

  .hero-image__title {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    /* border: 4px solid white; */
    height: 50%;

  }

  .container-products {
    height: auto;
    padding-top: var(--margen-top);
  }

  .products__description {
    margin: 0 1rem;
  }

  .products__img {
    grid-template-columns: repeat(2, 1fr);
  }

  .container-hero-image {
    justify-content: center;
    align-items: center;
    /* border: 4px solid black; */
  }

  .galery__productos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  }

  .galery__item>div>img {
    width: 10rem;
    height: 10rem;
    object-fit: cover;
    border-radius: 2rem;
  }

}

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

  .container-hero-image {
    height: 100vh;
    align-items: flex-start;
  }

  .products__img {
    grid-template-columns: repeat(1, 1fr);
  }

  .galery__productos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  }

  .hero-image__title{
    margin-bottom: 2rem;
  }

  .hero-image__img {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    position: static;
  }



  .galery__item>div>img {
    width: 10rem;
    height: 10rem;
    object-fit: cover;
    border-radius: 2rem;
  }

  .hero-image__img>div {
    position: static;
    right: 0;
  }

}