:root {
    --content-title-background: #aa9f39;
    --content-body-background: white;
    --content-body-foreground: #303030;
    --border-radius: 5px;
    --font: 'Lato', sans-serif;
    --logo-color: #aa9f39;
    --logo-doughnut-color: #62672e;
    --title-1-font-size: 24px;
    --title-2-font-size: 20px;

    --title-1-mobile-font-size: 1.3em;
    --title-2-mobile-font-size: 1em;
    --text-mobile-font-size: 1em;
}

.content-menu {
    width: 900px;
    margin: auto auto;
    padding: 50px 0 50px 0;
    background-color: var(--content-body-background);
}

.grid {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(250px,1fr));
    grid-auto-rows: 20px;
}

/* Non-grid specific CSS */
/*body {*/
    /*margin: 10px;*/
    /*text-rendering: optimizeLegibility;*/
    /*-webkit-font-smoothing: antialiased;*/
/*}*/

.item {
    background-color: #ffffff;
}

.photothumb{
    width: 100%;
}

.title {
    padding: 2px;
    text-align: center;
    font-size: var(--title-2-font-size);
    color: #ffffff;
    text-transform: uppercase;
}

.project .title{
    background-color: #607D8B;
}

.blog .title{
    background-color: #ff9800;
}

.photo {
    background-color: #F8F8F8;
    border: 1px solid black;
}

.photo .title{
    background-color: var(--logo-color);
}

.desc{
    padding: 2px 10px 15px 10px;
    font-size: var(--title-2-font-size);
}

.desc img{
    width: 50%;
    margin: 0 10px 10px 0;
    float: left;
}

.desc p{
    margin-bottom: 10px;
}

@media only screen and (min-device-width : 375px) and (max-device-width : 812px) and (-webkit-device-pixel-ratio : 3),
only screen and (min-device-width : 375px) and (max-device-width : 667px),
only screen and (min-device-width : 320px) and (max-device-width : 568px),
only screen and (min-device-width : 320px) and (max-device-width : 480px),
screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3),
screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 4),
screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3),
screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 2),
screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3),
screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 4) {

    .grid {
        grid-template-columns: repeat(auto-fill, minmax(45%,1fr));
    }

    .title {
        font-size: var(--title-2-mobile-font-size);
    }

    .desc {
        font-size: var(--title-2-mobile-font-size);
    }
}