.contenedor{

    width: 90%;

    max-width: 62.5em !important;

    margin: 1.875em auto !important;

    justify-content: center;

    align-items: center;

    text-align: center;

    display: grid;

    grid-gap: 4rem;

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

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



    grid-template-areas: "webpay flow caja"

                         "reposicion reposicion img-repo";

}





.contenedor > main,

.contenedor > div{

    padding: 4em;

    border-radius: 1.875em;

}



.contenedor .webpay{

    background-color:rgba(169, 169, 169, 0.327);

    grid-area: webpay;

    padding: 1em;

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



}



.contenedor .webpay img{

    width: 80%;

    margin-bottom: 4.1em;

}

.contenedor .flow{

    background-color:rgba(169, 169, 169, 0.327);

    grid-area: flow;

    padding: 1em;

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



}



.contenedor .flow img{

    width: 80%;

    margin-bottom: 6em;

}



.contenedor .caja{

    background-color:rgba(169, 169, 169, 0.327);

    grid-area: caja;

    padding: 1em;

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

}



.contenedor .caja img{

    width: 100%;

    margin-bottom: 0em;

    justify-content: center;

    align-items: center;

}



.contenedor .reposicion{

    grid-area: reposicion;
    width: 80%;
    padding: 1em;

}



.contenedor .img-repo{

    grid-area: img-repo;

    padding: 1em;

}







.info-repo{

    color: #00a29b;

    text-align: start;

    margin-top: 2em;



}



.reposicion h5{

    font-family: 'arkibal_displayheavy';

}



.reposicion p i{

    color: #00a29b;

    margin-right: 0.5em;

    font-size: 1.3em;

}



.webpay a,

.caja a,

.flow a{

    color: #fff;

    font-size: 1em;

    background-color: #00365f;

    border-radius: 30px;

    padding: 0.5em 2em;

    text-decoration: none;

    justify-content: flex-end!important;

}



.webpay a:hover,
.caja a:hover,
.flow a:hover{

    background-color: #88c9bf;

}







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

@media (max-width: 576px) {



    .contenedor{

        width: 90%;

        grid-gap: 4rem;

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

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

    

        grid-template-areas: "webpay"

                             "caja"

                             "flow"

                             "reposicion"

                             "img-repo";

    }

    .contenedor .reposicion{

        width: 100%;
    
    }
    

}



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

@media (max-width: 768px) {

    .contenedor{

        width: 90%;

        grid-gap: 4rem;

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

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

    

        grid-template-areas: "webpay"

                             "caja"

                             "flow"

                             "reposicion"

                             "img-repo";

    }

    .contenedor .reposicion{

        width: 100%;
    
    }

}



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

@media (max-width: 992px) {





}



/* `xl` applies to large devices (desktops, less than 1200px)*/

@media (max-width: 1200px) { 



}