.containerspecs {
    overflow-x: auto;

    width: 70vw;
    height: 70vh;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr, 3);
    grid-template-rows: repeat(3, 1fr, 3);
    grid-template-areas: "a b c" "d e f" "g h i";
}

.specbox {
    text-align:left;
    margin:10px;
}

.el-0 {
    grid-area: a;
}

.el-1 {
    grid-area: b;
}

.el-2 {
    grid-area: c;
}

.el-3 {
    grid-area: d;
}

.el-4 {
    grid-area: e;
}

.el-5 {
    grid-area: f;
}

.el-6 {
    grid-area: g;
}

.el-7 {
    grid-area: h;
}

.el-8 {
    grid-area: i;
}

.el-0,
.el-1,
.el-2,
.el-3,
.el-4,
.el-5,
.el-6,
.el-7,
.el-8 {
    background-color: #111;
    margin: 20px;
    text-align: left;
    padding: 20px;
}

.gridel h2 {
    font-size: 20px;
}

.spec-title {
    color: #a6c3e7;
}

.spec-desc {
    white-space: pre-line;
}

.gridel .spec-desc {
    display: none;
}

.gridel:hover {
    background-color: #222;
}

.gridel:hover .spec-desc {
    display: block;
}

/* TABLETS lANDSCAPE */

@media (orientation: landscape) {

    .containerspecs {
        overflow-x: auto;
    
        width: 70vw;
        height: 70vh;
        margin: auto;
        display: grid;
        grid-template-columns: repeat(3, 1fr, 3);
        grid-template-rows: repeat(3, 1fr, 3);
        grid-template-areas: "a b c" "d e f" "g h i";
    }

}
@media (orientation: portrait) {

    .containerspecs {
        overflow-x: auto;
    
        width: 70vw;
        height: 70vh;
        margin: auto;
        display: block;
    }

}