body {font-family: Calibri, Verdana, Geneva, sans-serif;}
        img {
            width: 100px;
            border: 1px solid black;
        }
        .grid-container {
            display: grid;
            grid-template-columns: auto;
            grid-gap: 2px;
            padding: 2px;
            background-color: black;
            width: 80%px;
            margin: auto;
        }
        .item1-header {
            grid-area: 1 / 1 / span 1 / span 1;
            background-color: salmon;
            color: white;
            text-align: center;
        }
        .item3-section {
            grid-area: 2 / 1 / span 1 / span 1;
            background-color: lime;
            width: 100%;
        }
        .green-div {
            width: 150px;
            border: 2px solid black;
            background-color: white;
            width: 80%;
            padding: 10px;
            margin: 20px auto;
        }
        .item4-article {
            grid-area: 3 / 1 / span 1 / span 1;
            background-color: whitesmoke;
            width: fit-content;
            padding: 20px;
        }
        .item5-footer {
            grid-area: 4 / 1 / span 1 / span 1;
            background-color: gray;
            text-align: center;
            padding: 15px;
        }
        .item2-aside {
            background-color: yellow;
            grid-area: 1 / 3 / span 2/ span 1;
            width: 200px;
            text-align: center;
            display: none;
        }
        .yellow-div {
            margin: auto;
            width: 150px;
            border: 2px solid red;
            background-color: white;
            margin: 10px 20px;
            padding: 1px 1px;
        }
        .big {
            font-size: 20px;
        }
        .big-text {
            font-size: 45px;
        }
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: lightgray;
            border: 2px solid black;
        }
        li {
            border-bottom: 2px solid black;
        }
        li:last-child {
            border-bottom: none;
        }
        a {
            display: block;
            text-decoration: none;
            padding: 5px;
            color: black;
        }
        a:hover {
            background-color: greenyellow;
        }
        #current {
            background-color: red;
            font-weight: bold;
        }
        @media (min-width: 440px) {
            .grid-container {grid-template-columns: auto auto;}
            .item1-header {grid-area: 1 / 1 / span 1 / span 2;}
            .item3-section {grid-area: 2 / 1 / span 1 / span 1;}
            .item4-article {grid-area: 2 / 2 / span 1 /span 1;}
            .item5-footer {grid-area: 3 / 1 / span  1 / span 2;}
            .item2-aside {display: none;}
            .green-div {
            margin: auto;
            width: 150px;
            border: 2px solid black;
            background-color: white;
            margin: 10px;
            padding: 10px;
        }
    }
        @media (min-width: 550px) {
            .grid-container {grid-template-columns: auto auto auto;}
            .item1-header {grid-area: 1 / 1 / span 1 / span 2;}
            .item2-aside {display: block;}
            .item3-section {grid-area: 2 / 1 / span 1 / span 1;}
            .item4-article {grid-area: 2 / 2 / span 1 /span 1;}
            .item5-footer {grid-area: 3 / 1 / span  1 / span 3;}   
    }