@charset "UTF-8";
/* CSS Document */

    /* Contenedor de la grilla */
.GS_ProductsHome_grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  padding: 0px;
  max-width: 1200px;
  margin: auto;
}

/* Tarjeta de producto */
.GS_ProductsHome_card {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background-size: cover;
  background-position: center;
  height: 300px;
  transition: transform 0.4s ease;
  cursor: pointer;
}

/* Efecto hover para ampliar */
.GS_ProductsHome_card:hover {
  transform: scale(1.05);
  z-index: 2;
}

/* Overlay base */
.GS_ProductsHome_overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 55px;
  color: white;
  padding: 15px;
  transition: height 0.4s ease;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-radius: 0 0 12px 12px;
}

/* Mostrar overlay al pasar el mouse */
.GS_ProductsHome_card:hover .GS_ProductsHome_overlay {
  height: 100%;
}

/* Tipografía dentro del overlay */
.GS_ProductsHome_overlay h3 {
  margin: 0;
  font-size: 1.4rem;
}

.GS_ProductsHome_overlay p {
  font-size: 1rem;
  margin-top: 10px;
}

/* Colores únicos por producto */
.GS_ProductsHome_overlay--1 { background: rgba(56, 130, 131, 0.95); }     /* Steam */
.GS_ProductsHome_overlay--2 { background: rgba(56, 130, 131, 0.95); }    /* SteamGel */
.GS_ProductsHome_overlay--3 { background: rgba(236, 155, 186, 0.95); }    /* Balance */
.GS_ProductsHome_overlay--4 { background: rgba(211, 190, 218, 0.95); }    /* Amaze*/
.GS_ProductsHome_overlay--5 { background: rgba(201, 19, 76, 0.95); }    /* AO12 */
.GS_ProductsHome_overlay--6 { background: rgba(230, 43, 38, 0.95); }     /* Prime */
.GS_ProductsHome_overlay--7 { background: rgba(72, 124, 184, 0.95); }      /* Pets */
.GS_ProductsHome_overlay--8 { background: rgba(7, 184, 207, 0.95); }      /* HHome */

@media (max-width: 768px) {
.GS_ProductsHome_grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  padding: 0px;
max-width:  90%;
  margin: auto;
}
}