using grid areas together with media size

Question

I have this problem. im using this:

    .div--rows {
height: 100%;
display: grid;
grid-template-columns: 1fr 30px 300px;
grid-template-rows: 253px 30px 1fr 30px 250px;
grid-template-areas: 
'header header header'
'hpause hpause hpause'
'content cpause right'
'fpause fpause fpause'
'footer footer footer';
    }

with divs like this

    .div--header {
grid-area: header;
background: #fff;
border-left:  0px;
border-right: 0px;
border-bottom: 1px solid black;
border-top: 0px;
    }

with adding

@media only screen and (device-width: 470px) and (-webkit-min-device-pixel-ratio: 2) and ( min--moz-device-pixel-ratio: 2)

my background dissapears, I thoght this is the only problem which I fixed by getting bg to the top, but than the pause divs didnt display or the content divs didnt work with bgcolor set to #fff

now without anything it still doesnt load border color 1px in this smaller media screen size

the code of grid areas in @media is like this:

                 .div--rows {
height: 100%;
display: grid;
grid-template-columns: 200px 30px 200px 30px 200px 30px 200px;
grid-template-rows: 452px;
grid-template-areas: 
'header'
'hpause'
'content'
'cpause'
'right'
'fpause'
'footer'; }

nor the rows size are not working

https://homoorigin.com/index.php is the page