:root {
  --texto: #343434;
  --blanco: #fff;
  --color-borde: #626262;
}
html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
/*Globales*/
img {
  width: 100%;
  margin: 0 auto;
}
a {
  display: block;
  text-decoration: none;
}
h1,
h2,
h3,
h4,
p {
  margin: 0;
}
/*Utilidades*/
main.contenedor-sn {
  max-width: 1600px;
  margin: 0 auto;
}
.banner-desk {
  display: none !important;
}
.contenedor-texto-seccion-sn {
  width: 98%;
  margin: 2rem auto;
}
.contenedor-texto-seccion-sn p {
  color: var(--texto);
  text-transform: uppercase;
  font-weight: 600;
  font-size: 0.85em;
}
.contenedor-cintillo-sn {
  width: 98%;
  margin: 1rem auto;
}
@media (min-width: 330px) {
  .contenedor-texto-seccion-sn p {
    font-size: 0.95em;
  }
}
@media (min-width: 448px) {
  .contenedor-texto-seccion-sn p {
    font-size: 1.15em;
  }
}
@media (min-width: 600px) {
  .contenedor-texto-seccion-sn p {
    font-size: 1.25em;
  }
}
@media (min-width: 780px) {
  .banner-desk {
    display: block !important;
  }
  .banner-mob {
    display: none !important;
  }
  .contenedor-texto-seccion-sn {
    margin: 2.5rem auto;
  }
  .contenedor-texto-seccion-sn p {
    font-size: 1.15em;
  }
}
@media (min-width: 900px) {
  .contenedor-texto-seccion-sn p {
    font-size: 1.45em;
  }
}
@media (min-width: 1200px) {
  .contenedor-texto-seccion-sn p {
    font-size: 1.55em;
  }
}
@media (min-width: 1400px) {
  .contenedor-texto-seccion-sn p {
    font-size: 1.8em;
  }
}
/*Banner Principal*/
.banner-principal-sn {
  width: 100%;
  margin: 0 auto;
}
/**Secciones**/
.contenedor-seccion-sn {
  width: 98%;
  margin: 1rem auto;
}
.grid-belleza-3-sn {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
}
.cat-sn {
  display: block;
  overflow: hidden;
}
.cat-sn img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* .cat-sn {
  transition: transform 0.3s ease;
}
.cat-sn:hover {
  transform: translateY(-4px);
} */
.cat-perfumeria {
  aspect-ratio: 738/566;
}
.cat-dermo,
.cat-cosmeticos {
  aspect-ratio: 738/271;
}

@media (min-width: 780px) {
  .grid-belleza-3-sn {
    grid-template-columns:
      1fr
      1fr;
    grid-template-rows: repeat(2, 1fr);
    align-items: center;
    gap: 1.2rem;
  }
  .cat-perfumeria {
    grid-column: 1;
    grid-row: 1 / span 2;
  }
  .cat-dermo {
    grid-column: 2;
    grid-row: 1;
  }
  .cat-cosmeticos {
    grid-column: 2;
    grid-row: 2;
  }
}
.grid-belleza-5-sn {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}
.cat-bolsos {
  grid-column: 1 / -1;
  aspect-ratio: 738 / 566;
}
.cat-joyeria,
.cat-relojes,
.cat-lentes,
.cat-estilismo {
  aspect-ratio: 358 / 271;
}
@media (min-width: 780px) {
  .grid-belleza-5-sn {
    grid-template-columns:
      minmax(0, 738fr)
      minmax(0, 358fr)
      minmax(0, 358fr);
    grid-template-rows: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: 1.2rem;
    aspect-ratio: 1476 / 566;
  }
  .cat-bolsos {
    grid-column: 1;
    grid-row: 1 / span 2;
    aspect-ratio: auto;
  }
  .cat-joyeria {
    grid-column: 2;
    grid-row: 1;
    aspect-ratio: auto;
  }
  .cat-relojes {
    grid-column: 3;
    grid-row: 1;
    aspect-ratio: auto;
  }
  .cat-lentes {
    grid-column: 2;
    grid-row: 2;
    aspect-ratio: auto;
  }
  .cat-estilismo {
    grid-column: 3;
    grid-row: 2;
    aspect-ratio: auto;
  }
}