@import "../../frameless";
@import "../../colors";

.grid {
    display: inline-block;
    width: 100%;

    $project-width: 200px;
    $project-height: 150px;

    $gallery-width: 200px;
    $gallery-height: 118px;

    .flex-row {
        margin: 0 auto;
        padding: 12px;
        width: (96px + (4 * $project-width)) / $em;
        justify-content: flex-start;
    }

    .thumbnail {
        padding: 12px;

        &:not(.cards) {
            &.project {
                width: $project-width;

                img {
                    width: $project-width;
                    height: $project-height;
                }
            }

            &.gallery {
                width: $gallery-width;

                img {
                    width: $gallery-width;
                    height: $gallery-height;
                }
            }
        }

        &.cards {
            &.project {
                box-shadow: 0 0 3px $box-shadow-gray;
                background-color: $ui-white;
                width: 220px;
                height: 208px;

                img {
                    width: 204px;
                    height: 152px;
                }
            }

            &.gallery {
                box-shadow: 0 0 3px $box-shadow-gray;
                background-color: $ui-white;
                width: 220px;
                height: 164px;

                img {
                    width: 204px;
                    height: 120px;
                }
            }
        }
    }

    &.column {
        flex-direction: column;
        justify-content: center;
    }

    @media only screen and (max-width: $tablet - 1) {
        flex-direction: column;
    }

    @media only screen and (max-width: $desktop - 1) {
        .flex-row {
            padding: 12px 0;
            width: 100%;
            justify-content: space-around;
        }
    }
}