@media (max-width: 991px) {

    /* primera fila */
    .parent-top {
        width: 100%;
        height: 900px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(10, 1fr);
        grid-column-gap: 0px;
        grid-row-gap: 15px;
    }

    .parent-top .div-grid-1 {
        grid-area: 5 / 1 / 8 / 2;
    }

    .parent-top .div-grid-2 {
        grid-area: 8 / 1 / 11 / 3;
    }

    .parent-top .div-grid-3 {
        grid-area: 1 / 1 / 5 / 3;
    }

    /*  fila top del centro */
    .parent-center-top {
        width: 100%;
        height: 800px;
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: repeat(12, 1fr);
        grid-column-gap: 0px;
        grid-row-gap: 0px;
        padding-top: 15px;
        padding-bottom: 15px;
    }

    .parent-center-top .div-grid-1 {
        grid-area: 1 / 1 / 13 / 13;
    }

    /* fila bottom del centro */
    .parent-center-bottom {
        width: 100%;
        height: 900px;
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: repeat(10, 1fr);
        grid-column-gap: 0px;
        grid-row-gap: 15px;
        padding-bottom: 15px;
    }

    .parent-center-bottom .div-grid-1 {
        grid-area: 1 / 1 / 7 / 13;
    }

    .parent-center-bottom .div-grid-2 {
        grid-area: 7 / 7 / 11 / 13;
    }

    /* ultima fila */
    .parent-bottom {
        width: 100%;
        height: 900px;
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: repeat(10, 1fr);
        grid-column-gap: 0px;
        grid-row-gap: 15px;
    }

    .parent-bottom .div-grid-1 {
        grid-area: 1 / 1 / 6 / 13;
    }

    .parent-bottom .div-grid-2 {
        grid-area: 6 / 1 / 11 / 13;
    }
}

@media (min-width: 992px) {

    /* primera fila */
    .parent-top {
        width: 100%;
        height: 633px;
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: repeat(10, 1fr);
        grid-column-gap: 0px;
        grid-row-gap: 0px;
    }

    .parent-top .div-grid-1 {
        grid-area: 1 / 1 / 8 / 5;
    }

    .parent-top .div-grid-2 {
        grid-area: 4 / 6 / 8 / 8;
    }

    .parent-top .div-grid-3 {
        grid-area: 6 / 9 / 13 / 13;
    }

    /*  fila top del centro */
    .parent-center-top {
        width: 100%;
        height: 800px;
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: repeat(12, 1fr);
        grid-column-gap: 0px;
        grid-row-gap: 0px;
    }

    .parent-center-top .div-grid-1 {
        grid-area: 3 / 4 / 11 / 10;
    }

    /* fila bottom del centro */
    .parent-center-bottom {
        width: 100%;
        height: 900px;
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: repeat(10, 1fr);
        grid-column-gap: 0px;
        grid-row-gap: 0px;
    }

    .parent-center-bottom .div-grid-1 {
        grid-area: 5 / 1 / 9 / 4;
    }

    .parent-center-bottom .div-grid-2 {
        grid-area: 2 / 9 / 10 / 13;
    }

    /* ultima fila */
    .parent-bottom {
        width: 100%;
        height: 900px;
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: repeat(6, 1fr);
        grid-column-gap: 0px;
        grid-row-gap: 0px;
    }

    .parent-bottom .div-grid-1 {
        grid-area: 1 / 4 / 7 / 8;
    }

    .parent-bottom .div-grid-2 {
        grid-area: 4 / 10 / 7 / 13;
    }
}

/* pantallas grandes */
@media (min-width: 1920px) {}