@import 'common.css';

:root
{
    --gallery-item-width: 300px;
}

@media (min-width: 712px)
{
    :root
    {
        --gallery-item-width: 220px;
    }
}

.main-content
{
    .gallery
    {
        margin: 1em 0 0 0;
        display: flex;
        justify-content: center;
        flex-direction: row;
        width:100%;
        flex-wrap: wrap;
        .gallery-item
        {
            width: var(--gallery-item-width);
            text-decoration: none;
            color: inherit;
            padding:14px;
            margin:7px;
            transition: box-shadow 0.05s ease;
            box-shadow: 0 0 3px var(--menu-active-shadow);

            &:hover
            {
                box-shadow: 0 0 10px var(--menu-hover-shadow);
            }
            &:active
            {
                box-shadow: inset 0 0 10px var(--menu-active-shadow);
                cursor: default;
            }

            .gallery-item-image-container{
                aspect-ratio: 173 / 115; /* exact image aspect ratio */
                margin-bottom: 7px;
                .gallery-item-image
                {
                    width: 100%;
                    height: 100%;
                    object-fit:cover;
                }
            }
            .gallery-item-text
            {
                display: flex;
                flex-direction: column;
                gap:3px;
                .gallery-item-title
                {
                    font-weight: bold;
                }
            }
        }
    }
}