@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Poiret+One&family=Sacramento&display=swap');

body {
    background-image: url('images/inspiration-geometry.png');
}

.wrapper {
    display: grid;
    grid-template-rows: 250px auto auto;
    align-items: center;
}

nav {
    grid-row: 2;
    font-family: 'Poiret One';
    font-size: 20px;
}

nav ul{
    text-align: center;
    list-style-type: none;
    padding: 0;
}

nav a{
    text-decoration: none;
    color: hotpink;
}

nav ul li{
    padding: 20px;
    background-color: lavenderblush;
    margin-bottom: 10px;
}

header h1{
    font-family: 'Sacramento';
    color: cornflowerblue;
    text-align: center;
    font-size: 60px;
    font-weight: normal;
}

h2{
    font-family: 'Poiret One';
    color: cornflowerblue;
}

img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (min-width: 800px){
    .wrapper{
        max-width: 1200px;
        margin: auto;
        grid-template-rows: 300px auto auto;
    }

    main{
        display: grid;
        grid-template-columns: 3fr 1fr;
    }

    .gallery{
        grid-column: 1;
        grid-row: 1;
        display: grid;
        grid-template-rows: min-content;
        grid-template-columns: repeat(3,1fr);
        grid-auto-rows: 150px;
        grid-gap: 10px;
        border: 1px dashed hotpink;
        padding: 0 10px 0 10px;
        margin-right: 10px;
    }

    .featured{
        grid-column: 2;
        background-color: cornflowerblue;
        padding: 10px;
    }

    .featured h2{
        color: white;
    }

    .gallery img{
        height: 100%;
        object-fit: cover;
    }

    .gallery h2{
        grid-column: 1 / span 3;
    }

    nav ul{
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        text-align: center;
    }

    .featured img{
        height: 150px;
        object-fit: cover;
        box-sizing: border-box;
        border: 3px solid white;
        margin-bottom: 10px;
        /* padding: 0 10px 0 10px; */
    }

    nav ul li{
        padding: 0px;
        padding-top: 10px;
        padding-bottom: 10px;
        /* padding-left: 0px;
        padding-right: 45px; */
        margin-right: 10px;
        /* margin: auto; */
    }

    .gallery img:first-of-type{
        grid-row: 2 / span 2;
        grid-column: 1 / span 2;
    }

    header h1{
        text-align: left;
    }
}