@import '../../environment';

section.gallery
{
    margin-top: steps(3.5);

    @include for-at-least-normal-tablets
    {
        margin-top: steps(4);
    }

    > .heading
    {
        @include large-heading;
    }

    .images
    {
        display: flex;
        flex-wrap: wrap;
        margin: (steps(3) - 1px) -1px -1px;

        @include for-at-least-tablets
        {
            flex-wrap: nowrap;
        }
    }

    .image
    {
        flex: none;
        width: 50%;
        padding: 1px;

        @include for-at-least-tablets
        {
            width: 25%;
        }

        a
        {
            position: relative;

            display: block;

            cursor: zoom-in;
        }

        .more
        {
            @include font-dimensions(32px, steps(4));
            @include antialiasing;

            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;

            display: flex;
            align-items: center;
            justify-content: center;

            color: $color-text-inverted-lighter;
            background: rgba($color-background-inverted-normal, 0.5);

            pointer-events: none;
        }
    }
}

.downloads
{
    margin-top: steps(5);

    @include for-at-least-normal-tablets
    {
        margin-top: steps(6);
    }
}
