.header_div{
    background-color: rgb(255, 192, 203,0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 5px;   
}

.caja h2{
    font-family: 'Segoe UI Symbol', 'Arial Unicode MS', 'Noto Sans', sans-serif;
    font-size: 1.2em;
}

p{
    font-family: 'Gaegu', cursive;
    font-size: 1em;
}

.contenido_div{
    display: flex;
    gap:10px
}

.elemento_contenido_div{
    padding: 20px;
    text-align: center;
    flex:1;
}

h1{
    font-size: 1.5em;
    font-family: "Dancing Script", "Comic Neue", cursive ;
    align-content: center;
}

.contenedor {
    display: flex;      /* activa flexbox */
    gap: 10px;    /* espacio entre los divs */
}

ul{
    list-style: none;
    padding-left: 0px;
}

ul li::before{
    content:"❀";
}

ul .entrada::before{
    content:"";
}

.caja {
    background-color: rgb(173,216,230,0.3);
    border: 2px solid  rgb(255, 192, 203,1);
    padding: 20px;
    flex: 1;            /* hace que los divs tengan ancho igual */
    text-align: center;
}

.lateral {
    flex: 1;          /* hace que el div lateral sea más estrecho */
}

.central {
    flex: 3;          /* hace que el div central sea más ancho */
}

a{
    text-decoration: none; /* quita el subrayado */
    color: inherit;   
}

/* Selecciona el contenedor de las imágenes */
.gallery4 {
    /* Habilita el modo de cuadrícula */
    display: grid;

    /* Define las columnas: 2 columnas, cada una con un ancho igual */
    grid-template-columns: 1fr 1fr; /* 1fr significa "una fracción del espacio disponible" */

    /* Opcional: Espacio entre las imágenes */
    gap: 15px; /* Ajusta este valor al gusto */
}

/* Opcional: Asegúrate de que las imágenes se ajusten dentro de su celda */
.gallery4 img {
    width: 100%; /* La imagen ocupará todo el ancho de su celda */
    height: auto; /* Mantiene la proporción de la imagen */
    object-fit: cover; /* Recorta la imagen si es necesario para llenar el espacio */
    aspect-ratio: 1 / 1; /* Opcional: Fuerza que todas las celdas sean cuadradas */
}