/* Clase para la columna de imagen */
.image-column {
    flex: 1;
    text-align: right;
    margin-bottom: 20px; /* Espacio en la parte inferior para evitar que se pegue a otros elementos */
}

/* Imagen dentro de la columna */
.image-column img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

/* Opcional: Estilo para la imagen dentro del cuadrito */
.cuadritos-container img {
    max-width: 100%;
    height: auto;
    border-radius: 10px; /* Asegurar que mantenga el estilo coherente */
}

.imagen-manos {
    background-image: url(/IMG/online/pareja-mayor-mesa-cogiendose-manos_23-2148014589.jpg);
    background-size: cover;
    background-position: center;
}

.imagen-flores-velas-home {
    background-image: url('/IMG/flores/ramo-velas-flores-palabra-decorativa-hogar-vista-superior-cama-blanca_169016-36244-2.jpg');
    background-size: cover;
    background-position: center;
}

.imagen-incienzo {
    background-image: url('/IMG/online/still-life-yoga-equipment.jpg');
    background-size: cover;
    background-position: center;
}

.imagen-jardin {
    background-image: url('/IMG/online/garden-with-table-background-cortada.jpg');
    background-size: cover;
    background-position: center;
}

.imagen-flores-de-cerezo {
    background-image: url('/IMG/flores/hermosa-flor-cerezo_181624-641-cortada.jpg');
    background-size: cover;
    background-position: center;
}

.imagen-flores-rosas-ascendentes {
    background-image: url('/IMG/flores/Copia\ de\ close-up-twigs-with-flowers.jpg');
    background-size: cover;
    background-position: center;
}

.imagen-hojas-verdes {
    background-image: url('/IMG/flores/clean-green-botanical-leaves-garden.jpg');
    background-size: cover;
    background-position: center;
}

.imagen-frente-beltran {
    background-image: url('/IMG/beltran/BELTRAN-1-cortada.jpeg');
    background-size: cover;
    background-position: center;
}

.imagen-fondo-blanco {
    background-image: url('/IMG/colores/blanco.png');
    background-size: cover;
    background-position: center;
}

.imagen-fondo-rosa {
    background-image: url('/IMG/colores/rosa.png');
    background-size: cover;
    background-position: center;
}

.imagen-fondo-verde {
    background-image: url('/IMG/colores/verde.png');
    background-size: cover;
    background-position: center;
}

.imagen-fondo-gris {
    background-image: url('/IMG/colores/gris.png');
    background-size: cover;
    background-position: center;
}

.text-image-row {
    display: flex;
    flex-direction: row; /* Imagen y texto en fila (lado a lado) por defecto */
    justify-content: space-between; /* Espacio entre texto e imagen */
    align-items: center; /* Alineación vertical al centro */
    margin-bottom: 20px; /* Espacio inferior */
}

.text-column {
    flex: 1; /* La columna de texto ocupa todo el espacio disponible a la izquierda */
    padding-right: 20px; /* Espacio entre el texto y la imagen */
    text-align: left; /* Alineación del texto a la izquierda */
}

.image-column {
    flex: 1; /* La columna de imagen ocupa todo el espacio disponible a la derecha */
    text-align: right; /* Alineación de la imagen a la derecha */
}

.image-column img {
    max-width: 100%; /* Evita que la imagen exceda su contenedor */
    height: auto; /* Mantiene la proporción de la imagen */
    border-radius: 10px;
}

/* Ajuste para pantallas pequeñas */
@media (max-width: 768px) {
    .text-image-row {
        flex-direction: column; /* En pantallas pequeñas, la imagen va debajo del texto */
    }

    .image-column {
        text-align: center; /* Centra la imagen en pantallas pequeñas */
        padding-top: 20px; /* Añade espacio superior cuando la imagen está debajo */
    }

    .text-column {
        padding-right: 0; /* Quita el espacio entre texto e imagen en pantallas pequeñas */
    }
}

.image-gallery {
    width: 80%;
    margin: 50px auto; /* Corrige el espacio extra de 'px' */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 30px;
}

.image-gallery img {
    width: 100%; /* Asegura que las imágenes ocupen todo el ancho */
    height: 240px; /* Fija la altura de las imágenes */
    object-fit: cover; /* Aplica un recorte a las imágenes para llenar el espacio */
    cursor: pointer;
    transition: transform 1s;
}

.image-gallery img:hover {
    transform: scale(1.2); /* Añade un efecto de "zoom" al pasar el cursor */
}

.full-img {
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.9);
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 99;
}

.full-img span {
    position: absolute;
    top: 5%;
    right: 5%;
    font-size: 30px;
    color: #fff;
    cursor: pointer;
}

.full-img img {
    width: 90%;
    max-width: 600px;
}