/* ============================================================================================ */
/* Clases especiales que se crean puntualmente para usarse en con html en la descripción de un evento puntual */
/* QUEDÓ PARA QUE LOS GURISES USEN UN HTML ESPECÍFICO Y PUEDAN REPLICAR EL HTML Y REUTILIZARLO */
/* ! Tener en cuenta que este css quedó así y les pasamos un html a comercial que usa estas clases para poner botones fácilmente en la descripción de micrositios, si alguno de los gurises pide cambios en ese html específicos, habría que duplicar estas clases en otro lado, ponerlas en el html y ahí aplicar los cambios específicos. */

.buttons2-containerGridButtonsInfoText {
    display: grid;
    grid-template-columns: 50% 50%;
    margin: 4% 0 6% 0;
    justify-content: center;
    align-items: center;
    align-content: center;
}

.buttons2-containerGridButtonsInfoText_3cols {
    display: grid;
    grid-template-columns: 33% 33% 33%;
    margin: 4% 0 6% 0;
    justify-content: center;
    align-items: center;
    align-content: center;
}

.buttons2-gridItemInfoText {
    text-align: center;
}

a.buttons2-buttonEventInfoText1 {
    padding: 2vh 1.8vw 2vh 1.8vw !important;

    border-radius: 12px;
    box-shadow: 0px 3px 6px #00000029;

    transition: 0.3s;

    font-family: Montserrat, 'Helvetica', 'Arial', sans-serif;
    text-transform: uppercase;
    font-weight: bold;
    text-align: center;

    display: flex;
    justify-content: center;
    align-items: center;
}

a.buttons2-buttonEventInfoText2 {
    padding: 2vh 1.8vw 2vh 1.8vw !important;

    border-radius: 12px;
    box-shadow: 0px 3px 6px #00000029;

    transition: 0.3s;

    font-family: Montserrat, 'Helvetica', 'Arial', sans-serif;
    text-transform: uppercase;
    font-weight: bold;
    text-align: center;

    display: flex;
    justify-content: center;
    align-items: center;
}

.buttons2-containerTitleInfoText1 {
    text-align: center;
}

@media only screen and (min-width: 1100px) {
    .buttons2-containerGridButtonsInfoText {
        padding: 0 4vw 0 4vw;
        gap: 55px 4vw;
    }

    .buttons2-containerGridButtonsInfoText_3cols {
        padding: 0 4vw 0 4vw;
        gap: 55px 4vw;
    }
}

@media only screen and (max-width: 1099px) {
    .buttons2-containerGridButtonsInfoText {
        padding: 0 4vw 0 4vw;
        gap: 35px 4vw;
    }

    .buttons2-containerGridButtonsInfoText_3cols {
        padding: 0 4vw 0 4vw;
        gap: 35px 4vw;
    }
}

@media only screen and (min-width: 800px) {
    .buttons2-titleInfoText1 {
        font-size: 1.3vw;
    }

    .buttons2-buttonEventInfoText1 {
        font-size: 1.1vw;
    }

    .buttons2-buttonEventInfoText2 {
        font-size: 1.1vw;
    }

    .buttons2-buttonEventInfoText3 {
        font-size: 1.1vw;
    }
}

@media only screen and (max-width: 799px) {
    .buttons2-containerTitleInfoText1 {
        padding: 0 5vw 0 5vw;
    }

    .buttons2-titleInfoText1 {
        font-size: 2.8vw;
    }

    .buttons2-buttonEventInfoText1 {
        font-size: 2.7vw;
    }

    .buttons2-buttonEventInfoText2 {
        font-size: 2.7vw;
    }

    .buttons2-buttonEventInfoText3 {
        font-size: 2.7vw;
    }

    .buttons2-containerGridButtonsInfoText {
        padding: 0 8vw 0 8vw;
        gap: 50px 8vw;
    }

    .buttons2-containerGridButtonsInfoText_3cols {
        padding: 0 8vw 0 8vw;
        gap: 50px 8vw;
    }
}
/* FIN Clases especiales que se crean puntualmente para usarse en con html en la descripción de un evento puntual */
/* ============================================================================================ */