171 lines
3.5 KiB
CSS
171 lines
3.5 KiB
CSS
main {
|
|
background-image: url('/static/y_img/solutions/girl.png');
|
|
background-repeat: no-repeat;
|
|
background-position: center bottom;
|
|
}
|
|
|
|
|
|
.parent {
|
|
padding: 5em;
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
grid-template-rows: repeat(3, 1fr);
|
|
/* gap: 2em; */
|
|
|
|
& div {
|
|
background-size: contain;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
}
|
|
|
|
.parent div {
|
|
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
|
border: 2px solid transparent;
|
|
border-radius: 15px;
|
|
|
|
&:hover {
|
|
animation: vibrate 0.4s ease infinite !important;
|
|
transform: scale(1.05) !important;
|
|
box-shadow: 0 5px 15px rgba(255, 255, 255, 0.5) !important;
|
|
border-color: #00acc1 !important;
|
|
filter: brightness(1.05) !important;
|
|
z-index: 10 !important;
|
|
border-radius: 15px !important;
|
|
}
|
|
}
|
|
|
|
|
|
/* Imágenes específicas */
|
|
.i-i {
|
|
background-image: url('/static/y_img/solutions/reclutamiento_seleccion.png');
|
|
}
|
|
|
|
.i-ii {
|
|
background-image: url('/static/y_img/solutions/liderazgo.png');
|
|
}
|
|
|
|
.i-iii {
|
|
background-image: url('/static/y_img/solutions/capacitacion.png');
|
|
}
|
|
|
|
.ii-i {
|
|
background-image: url('/static/y_img/solutions/cambio.png');
|
|
grid-row: 2;
|
|
}
|
|
|
|
.ii-ii {
|
|
background-image: url('/static/y_img/solutions/objetivos.png');
|
|
grid-column: 3;
|
|
grid-row: 2;
|
|
}
|
|
|
|
|
|
/* Smartphones (hasta 767px) */
|
|
@media (max-width: 767px) {
|
|
|
|
main {
|
|
width: 95vw;
|
|
min-height: 70vh;
|
|
margin: 10px auto;
|
|
background-size: auto 15%;
|
|
border-radius: 12px;
|
|
padding: 1em; /* Añadido para espacio interno */
|
|
}
|
|
|
|
.parent {
|
|
width: 100vw; /* Cambiado a 100% para mejor ajuste */
|
|
padding: 1em; /* Reducido el padding para móviles */
|
|
|
|
display: grid;
|
|
grid-template-columns: 1fr; /* Solo una columna en móviles */
|
|
grid-template-rows: repeat(6, minmax(120px, 1fr)); /* Altura mínima garantizada */
|
|
gap: 1em; /* Espacio reducido para móviles */
|
|
}
|
|
|
|
/* Asegurar que todos los divs sean visibles */
|
|
.parent div {
|
|
min-height: 120px; /* Altura mínima garantizada */
|
|
width: 100% !important;
|
|
background-size: contain;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
border: 2px solid rgba(255, 255, 255, 0.5); /* Borde más visible */
|
|
}
|
|
|
|
/* Posicionamiento específico para móviles */
|
|
.ii-i {
|
|
grid-row: 4; /* Posición ajustada */
|
|
}
|
|
|
|
.ii-ii {
|
|
grid-row: 5; /* Posición ajustada */
|
|
grid-column: 1; /* Reset para móviles */
|
|
}
|
|
|
|
}
|
|
|
|
/* Tablets (768px - 1023px) */
|
|
@media (min-width: 768px) and (max-width: 1023px) {
|
|
|
|
main {
|
|
width: 90vw;
|
|
min-height: 70vh;
|
|
margin: 10px auto;
|
|
background-size: auto 35%;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.parent {
|
|
width: 90vw;
|
|
/* Altura para que la grilla sea visible */
|
|
height: 80vh;
|
|
}
|
|
|
|
}
|
|
|
|
/* Laptops (1024px - 1439px) */
|
|
@media (min-width: 1024px) and (max-width: 1439px) {
|
|
|
|
main {
|
|
width: 85vw;
|
|
min-height: 85vh;
|
|
margin: 10px auto;
|
|
background-size: auto 50%;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.parent {
|
|
width: 80vw;
|
|
/* Altura para que la grilla sea visible */
|
|
height: 80vh;
|
|
}
|
|
|
|
}
|
|
|
|
/* PCs de escritorio (1440px - 1919px) */
|
|
@media (min-width: 1440px) and (max-width: 1919px) {
|
|
|
|
|
|
.parent {
|
|
width: 70vw;
|
|
/* Altura para que la grilla sea visible */
|
|
height: 70vh;
|
|
}
|
|
|
|
}
|
|
|
|
/* Pantallas Ultrawide (1920px en adelante) */
|
|
@media (min-width: 1920px) {
|
|
|
|
.parent {
|
|
width: 75vw;
|
|
height: 40vw;
|
|
gap: 2em;
|
|
}
|
|
|
|
main {
|
|
background-size: 50% auto; /* 30% del ancho del contenedor */
|
|
}
|
|
|
|
} |