@charset "utf-8";
/*--------スマホ用の設定---------*/

.container{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 80px 150px 300px 150px 80px;
    gap: 20px;
}

.header{
    background-color: #eedcb3;
}
.article{
    background-color: #ffbf00;
}
.main{
    background-color: #00ffff;
}
.aside{
    background-color: #ff99b2;
}
.footer{
    background-color: #eedcb3;
}

/*--------タブレット用の設定---------*/



@media screen and (min-width:375px){
 
    .container{
        grid-template-columns: 2fr 1fr;
        grid-template-rows: 80px 150px 300px 80px;
    }
    .header{
        grid-column:1 / 3;
    }
    .article{
        grid-column: 1;
    }
    .aside{
        grid-column:2;
        grid-row:2;
    }
    .main{
        grid-column: 1 / 3;
    }
    .footer{
        grid-column: 1 / 3;
        grid-row: 4;
    }
}

/*--------PC用の設定---------*/

@media screen and (min-width :835px){
    .container{
        grid-template-columns: 1fr 2fr 1fr;
        grid-template-rows: 80px 300px 80px;
    }
    .header{
        grid-column: 1 / 4;
    }
    .article{
        
    }
    .main{
        grid-column:2;
        grid-row: 2;
    }
    .aside{
        grid-column: 3;
    }
    .footer{
        grid-column: 1 / 4;
        grid-row: 3;
    }
}