@import url(fonts.css);
@import url(membresia-1.css);
@import url(membresia-2.css);
@import url(membresia-3.css);

.contenedor-membresias{
    display: flex;
    justify-content: center;
}

.membresia{
    max-width: 100%;
    display: grid;
    grid-template-columns: 360px 395px 360px;
    grid-template-rows: auto;
    grid-template-areas: "membresia-1 membresia-2 membresia-3";
}

.membresia-1{
    grid-area: membresia-1;
    border: 1px solid #dfe1e6;
    height: 85%;
    margin-top: 30%;
}

.membresia-2{
    grid-area: membresia-2;
    background-color: #000;
    color: #fff; 
    height: 106%;
}

.membresia-3{
    grid-area: membresia-3;
    border: 1px solid #dfe1e6;
    height: 91%;
    margin-top: 20%;
}


@media screen and (max-width: 380px){
    .membresia{
        max-width: 100%;
        height: auto;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-template-areas: "membresia-1" 
                             "membresia-2"
                             "membresia-3";
    }
    
    .membresia-1{
        grid-area: membresia-1;
        border: 1px solid #dfe1e6;
        height: 100%;
        margin-top: -5%;
    }
    
    .membresia-2{
        grid-area: membresia-2;
        margin-top: 5%;
        /*background-color: #000;
        color: #fff; 
        height: 106%;*/
    }
    
    .membresia-3{
        grid-area: membresia-3;
        margin-top: 25%;
        /*border: 1px solid #dfe1e6;
        height: 91%;
        margin-top: 20%;*/
    } 
}