/* =============================================================================
 * Art Gallery Stylesheet
 * =============================================================================
 * 
 * Author: Niji System - Satoki Nijikawa
 *                       Wamo
 *                       Vihreääketty
 * 
 */

/* ====== <div> styles ====== */

div.art-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-gap: 0.5rem;
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
    font-family: 'Arimo', 'Linux Biolinum', 'Kurinto Sans', 'Arial', 'Noto Sans', sans-serif;
}

div.art-grid-alt {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-gap: 0.5rem;
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
    font-family: 'Arimo', 'Linux Biolinum', 'Kurinto Sans', 'Arial', 'Noto Sans', sans-serif;
}

figure.art-grid-item {
    border-style: groove;
    border-width: 0.4rem;
    border-color: #dadada;
    background-color: #555555;
    width: 384px;
    margin: 1rem;
    text-align: center;
}

figure.art-grid-item-alt {
    border-style: groove;
    border-width: 0.4rem;
    border-color: #dadada;
    background-color: #555555;
    width: 256px;
    margin: 1rem;
    text-align: center;
}


img.art {
    width: 384px;
}

img.gallery-art-square {
    width: 256px;
    height: 256px;
}

img.gallery-art-horizontal {
    width: 256px;
}

img.gallery-art-vertical {
    height: 256px;
}

@media only screen and (max-width: 600px) {
    div.art-grid {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-gap: 0.5rem;
        margin-top: 0.25rem;
        margin-bottom: 0.25rem;
        font-family: 'Arimo', 'Linux Biolinum', 'Kurinto Sans', 'Arial', 'Noto Sans', sans-serif;
    }
    div.art-grid-alt {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-gap: 0.5rem;
        margin-top: 0.25rem;
        margin-bottom: 0.25rem;
        font-family: 'Arimo', 'Linux Biolinum', 'Kurinto Sans', 'Arial', 'Noto Sans', sans-serif;
    }
    figure.art-grid-item {
        border-style: groove;
        border-width: 0.4rem;
        border-color: #dadada;
        background-color: #555555;
        width: 240px;
        margin: 1rem;
    }
    figure.art-grid-item-alt {
        border-style: groove;
        border-width: 0.4rem;
        border-color: #dadada;
        background-color: #555555;
        width: 240px;
        margin: 1rem;
        text-align: center;
    }
    img.art {
        width: 240px;
    }
    img.gallery-art-square {
        width: 240px;
        height: 240px;
    }
    img.gallery-art-horizontal {
        width: 240px;
    }
    img.gallery-art-vertical {
        height: 240px;
    }
}



@media only screen and (min-width: 600.2px) {
    @media only screen and (max-width: 991.8px) {
        div.art-grid {
            display: grid;
            grid-template-columns: 1fr;
            grid-template-rows: auto;
            grid-gap: 0.5rem;
            margin-top: 0.25rem;
            margin-bottom: 0.25rem;
            font-family: 'Arimo', 'Linux Biolinum', 'Kurinto Sans', 'Arial', 'Noto Sans', sans-serif;
        }
        div.art-grid-alt {
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: auto;
            grid-gap: 0.5rem;
            margin-top: 0.25rem;
            margin-bottom: 0.25rem;
            font-family: 'Arimo', 'Linux Biolinum', 'Kurinto Sans', 'Arial', 'Noto Sans', sans-serif;
        }
        figure.art-grid-item {
            border-style: groove;
            border-width: 0.4rem;
            border-color: #dadada;
            background-color: #555555;
            width: 240px;
            margin: 1rem;
        }
        figure.art-grid-item-alt {
            border-style: groove;
            border-width: 0.4rem;
            border-color: #dadada;
            background-color: #555555;
            width: 240px;
            margin: 1rem;
            text-align: center;
        }
        img.art {
            width: 240px;
        }
        img.gallery-art-square {
            width: 240px;
            height: 240px;
        }
        img.gallery-art-horizontal {
            width: 240px;
        }
        img.gallery-art-vertical {
            height: 240px;
        }
    }
}