/* VARIABLES */
:root{
    --azul: #007BFF;
    --amarillo: #f1c40f;
    --blanco: #f9f9f9;
    --negro: #272727;
}

.images {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    overflow: hidden;
    min-width: 600px;
    max-width: 1080px;
    width: calc(100% -100);
    height: 600px;    
}

.image{
    position: relative;
    overflow: hidden;
    min-width: 60px;
    margin: 5px;
    background-size: auto 100%;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    transition: 0.5s cubic-bezier(0.1,0.1,0.1,0.1);
}

.activo{
    flex-grow: 10000;
    transform: scale(1);
    max-width: 1080px;
    border-radius: 5px;
    background-size: auto 100%;
}

.image:not(.activo){
    flex-grow: 1;
    border-radius: 5px;
}

@media screen and (max-width: 480px) {
    .images{
        display: none;
    }

    /* Mostrar y centrar la clase .pentagon-image-about */
    .about-logo {
        display: flex; /* Usar flexbox para alinear el contenido */
        justify-content: center; /* Centrar horizontalmente */
        align-items: center; /* Centrar verticalmente */
        position: relative; /* Asegura que los elementos dentro puedan posicionarse correctamente */
        height: 100%; /* Asegura que el contenedor ocupe el 100% de la altura disponible */
    }

    .about-logo .pentagon-image-about {
        display: block; /* Asegura que la imagen de pentágono sea visible */
        width: 100%; /* Ajusta el tamaño al contenedor */
        height: 100%; /* Mantiene la relación de aspecto de la imagen */
        background-size: cover; /* Ajusta la imagen para cubrir el área */
        background-position: center; /* Centra la imagen */
        background-repeat: no-repeat; /* Evita la repetición */
    }

}