style.css

h1 {
    color: white;
    font-family: 'sonsie one';
    font-size: 40px;
    margin: 10px;
    text-align: center;
    margin: 50px;
}

body {
    background: black;
}

main {
    height: 60vh;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(6, 1fr);
    grid-gap: 5px;
    margin: 100px;
}

img {
    height: auto;
    width: 100%;
    border-radius: 25px;
    grid-column: span 2;
    grid-row: span 1;
}

div {
    grid-column: span 1;
}




@media only screen and (min-width: 600px) {
    main {
        height: 60vh;
        display: grid;
        grid-template-rows: repeat(5, 1fr);
        grid-template-columns: repeat(9, 1fr);
        margin: 10px;
        grid-gap: 2px;
    }
    img {
        height: auto;
        width: 100%;
        display: grid;
        grid-row: span 1;
        grid-column: span 2;
    }

}

@media only screen and (min-width: 800px) {
    main {
        height: 60vh;
        display: grid;
        grid-template-rows: repeat(4, 1fr);
        grid-template-columns: repeat(11, 1fr);
        margin: 10px;
        grid-gap: 2px;
    }
    
}