body{
    background:#FFFFFF;
}
a, a:hover, a:active, a:visited{
    text-decoration:none;
}

#box{
    position:relative;
    width:500px;
    margin:0 auto;
    top:50px;
    margin-bottom:200px;
}
.box{
    margin-bottom:75px;
}
h1{
    font-family: "Outfit", sans-serif;
    font-optical-sizing: auto;
    font-weight:500;
    font-style: normal;
    font-size:22px;
}
h2{
    font-family: "Outfit", sans-serif;
    font-optical-sizing: auto;
    font-weight:500;
    font-style: normal;
    font-size:18px;
}
p{
    font-family:"Instrument Sans", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings: "wdth" 100;
    font-size:14px;
    font-weight:300;
}
li{
    font-family:"Instrument Sans", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings: "wdth" 100;
    font-size:13px;
    font-weight:300;
}

.grid{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}
.tile{
    width:150px;
    height:150px;
    border-radius:10px;
    object-fit:cover;
}

@media only screen and (max-width: 800px) {
    #box{
        position:relative;
        width:300px;
        margin:0 auto;
        top:50px;
    }

    .grid{
        gap:5px;
    }
    .tile{
        width:125px;
        height:125px;
        border-radius:7px;
        object-fit:cover;
    }
}