.contenedor{

    width: 90%;

    max-width: 62.5em;

    margin: 1.875rem auto !important;

    display: grid;

    grid-gap: 10px;

    grid-template-columns: repeat(4, 1fr);

    grid-template-rows: repeat(2, auto);



    grid-template-areas: "widget-1 widget-2 widget-4 widget-5"

                         "widget-3 widget-3 widget-4 widget-6";

}





.titulos-beneficios h3{

    font-family: 'arkibal_displayheavy';

    background: -webkit-linear-gradient(360deg, rgba(0,55,98,1) 25%, rgba(0,204,160,1) 100%);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;


}



.contenedor > a,

.contenedor > div{

    padding: 4.475em;

    border-radius: 30px;

    box-shadow: 5px 5px 5px rgb(0 0 0 /40%);

    text-decoration: none;

    

}



.contenedor .widget-1{

    background: #9ac31c;

    color: #00634b;

    grid-area: widget-1;

    padding: 1em;



}



.contenedor .widget-1 .iconos{

    text-align: end;    

}



.contenedor .widget-1 i{

    

    color: #98c11c;

    background-color: #00634b;

    border-radius: 50%;

    padding: 0.7em;

    text-align: end !important;



}



.contenedor .widget-2{

    background: #00634b;

    color: #8acbc1;

    grid-area: widget-2;

    padding: 1em;



}



.contenedor .widget-2 .iconos{

    text-align: end;    

}



.contenedor .widget-2 i{

    

    color: #00634b;

    background-color: #8acbc1;

    border-radius: 50%;

    padding: 0.7em;

    text-align: end !important;



}



.contenedor .widget-3{

    background: #8acbc1;

    color: #00365f;

    grid-area: widget-3;

    padding: 0.75em;

}



.contenedor .widget-3 .iconos{

    text-align: end;    

}



.contenedor .widget-3 i{

    

    color: #8acbc1;

    background-color: #00365f;

    border-radius: 50%;

    padding: 0.7em;

    text-align: end !important;



}



.contenedor .widget-4{

    background: #9ac31c;

    color: #00634b;

    grid-area: widget-4;

    padding: 0;

}



.contenedor .widget-4 h4{

    padding: 1rem !important;

    color: #00634b;

    padding-bottom: 0!important;



}



.contenedor .widget-4 p{

    padding: 1rem !important;

    padding-top: 0 !important;

}



.contenedor .widget-5{

    background: #8acbc1;

    color: #00365f;

    grid-area: widget-5;

    padding: 1em;

}



.contenedor .widget-5 .iconos{

    text-align: end;    

}



.contenedor .widget-5 i{

    

    color: #8acbc1;

    background-color: #00365f;

    border-radius: 50%;

    padding: 0.7em;

    text-align: end !important;



}



.contenedor .widget-6{

    background: #00634b;

    color: #8acbc1;

    grid-area: widget-6;

    padding: 1em;

}



.contenedor .widget-6 .iconos{

    text-align: end;    

}



.contenedor .widget-6 i{

    

    color: #00634b;

    background: #8acbc1;

    border-radius: 50%;

    padding: 0.7em;

    

}













.widget-1:hover {

    transform: translateY(-5px);

    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);

}



.widget-1:active {

    transform: translateY(-5px);

    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);

}



.widget-1:hover::after {

    transform: scaleX(1.4) scaleY(1.6);



}



.widget-2:hover {

    transform: translateY(-5px);

    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);

}



.widget-2:active {

    transform: translateY(-5px);

    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);

}



.widget-2:hover::after {

    transform: scaleX(1.4) scaleY(1.6);



}



.widget-4:hover {

    transform: translateY(-5px);

    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);

}



.widget-4:active {

    transform: translateY(-5px);

    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);

}



.widget-4:hover::after {

    transform: scaleX(1.4) scaleY(1.6);



}

.widget-5:hover {

    transform: translateY(-5px);

    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);

}



.widget-5:active {

    transform: translateY(-5px);

    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);

}



.widget-5:hover::after {

    transform: scaleX(1.4) scaleY(1.6);



}


.widget-6:hover {

    transform: translateY(-5px);

    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);

}



.widget-6:active {

    transform: translateY(-5px);

    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);

}



.widget-6:hover::after {

    transform: scaleX(1.4) scaleY(1.6);



}







/* `sm` applies to x-small devices (portrait phones, less than 576px)*/

@media (max-width: 576px) { 



    .contenedor{

        grid-template-columns: repeat(2, 1fr);

        grid-template-rows: repeat(4, auto);

        width: 90%;

        grid-template-areas: "widget-1 widget-2"

                             "widget-3 widget-3"

                             "widget-4 widget-5"

                             "widget-4 widget-6";

    }



    .contenedor > a,

    .contenedor > div{



        padding: 3em;



    }



 }





/* `md` applies to small devices (landscape phones, less than 768px)*/

@media (max-width: 768px) { 



    .contenedor{

        grid-template-columns: repeat(2, 1fr);

        grid-template-rows: repeat(4, auto);

        width: 90%;

        grid-template-areas: "widget-1 widget-2"

                             "widget-3 widget-3"

                             "widget-4 widget-5"

                             "widget-4 widget-6";

    }



    .contenedor > a,

    .contenedor > div{



        padding: 3em;



    }



 }



/* `lg` applies to medium devices (tablets, less than 992px)*/

@media (max-width: 992px) { 



    .contenedor{

        width: 90%;

    }



    .contenedor > a,

    .contenedor > div{

        padding: 3.3em;

    }


 }