testing css

.product-tab > input,
.producttext > div {display: none;}
#tab1:checked ~ .producttext .tab1,
#tab2:checked ~ .producttext .tab2,
#tab3:checked ~ .producttext .tab3,
#tab4:checked ~ .producttext .tab4,
#tab5:checked ~ .producttext .tab5,
#tab6:checked ~ .producttext .tab6 { display: table-row-group;}



.gridcontainer{
    display: grid;
    grid-template-columns: 7fr 4fr;
    grid-template-rows: 4fr 4fr 7fr 3fr;
    grid-template-areas:
        "main       main"
        "header     header"
        "containerB containerB"
        "footer     footer";

    height: 100vh;
    margin: 1em;
}
.container2{
    display: grid;
    grid-area: containerB;
    grid-template-columns: 2;
    grid-template-rows: 2;
    grid-template-areas:
        "navtab     navtab"
        "txt        img";
    height: 100vh;
    margin: 1em;
}


main{
    grid-area: main;
    background-color: #b5002a ;
}

header{
    grid-area: header;
    background-color: #f5ecec ;

}
header p{
    text-align: left;
    font-size: 35px;
    color: rgb(155, 0, 0);
    margin-top: 10px;
    padding: 0;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}


.product-tab {
    grid-area: navtab;
    background: #76d976;

}

.product-tab nav{
    margin-left: 0%;
    transform: translateX(0%);
    text-align: center;
    background: white;

}
.product-tab nav ul{
    list-style: none;
}

.product-tab nav ul li{
    float: left ;
    bottom: 20px;
    margin-bottom: 20px;
    background-color: white;
    font-size: 20px;
}

.product-tab nav ul li label{
    text-align: center;
    margin: 10px 10px 10px 10px;
    padding: 10px 10px 10px 10px;
    border: 1px solid #f80b0b;



}



.producttext{
    grid-area: txt;
    float: left;
    background-color: #0bfdfd ;
    clear: both;
    text-align: left;
    font-size: 20px;

}
.productimage{
    grid-area: img;
    background-color: #3100ff ;
    clear: both;
}
footer{
    grid-area: footer;
    background-color: #000000 ;
    color: white;
}