﻿/****************componentes Columnas (1 y 2) *********************************/
.one-col-umb {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.content-column .one-col-umb {
    width: calc(80vw - 20%);
    text-align: center;
    margin: 0 auto;
    padding: 40px 0px;
}

.two-col-umb {
    display: grid;
    grid-template-columns: repeat(2, 50%); /* Dos columnas de igual tamaño */
    gap: 16px; /* Espacio entre las tarjetas */
    justify-items: stretch; /* Cambiar de center a stretch para que ocupen todo el espacio */
    justify-content: center;
    margin: 20px 0 20px 0px;
}

    .two-col-umb img {
        width: 350px;
    }

    .two-col-umb .img-container-umb img {
        width: 100%;
        height: inherit;
        padding: 0px 40px 40px 0;
    }

/* Asegurar que los elementos del grid ocupen todo el ancho de su columna */
.umb-block-grid__layout-item {
    width: 100%;
}

/* Mejorar el layout horizontal del accordion e imagen */
.row-ins.container-accord {
    display: grid;
    grid-template-columns: 1fr auto; /* Accordion flexible, imagen tamaño natural */
    gap: 20px;
    align-items: center;
    width: 100%;
}

@media (max-width: 992px) {
    /* Estilo para pantallas grandes */
    .one-col-umb .col-md-12 .col-md-12 h2 {
        font-size: 20px !important;
    }

    .one-col-umb .col-md-12 .col-md-12 p {
        font-size: 14px !important;
    }

    /* Hacer que el contenido interno se apile en tablets */
    .row-ins.container-accord {
        grid-template-columns: 1fr !important;
        text-align: center;
    }
}

@media (max-width: 500px) {
    /* Ajustes específicos para pantallas más grandes */
    .two-col-umb {
        grid-template-columns: repeat(1, calc(100vw - 5%)) !important;
    }

        .two-col-umb .img-container-umb img {
            padding: 20px 10px;
        }

    /* Asegurar que en móvil el contenido interno también se apile */
    .row-ins.container-accord {
        grid-template-columns: 1fr !important;
        text-align: center;
    }
}

@media (max-width: 1324px) {
    .two-col-umb {
        grid-template-columns: repeat(2, calc((100vw - 5%) /2));
    }
}
/********************************************************************************/
