@import 'variables';

.projects {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: $spacer * 3;

    @media (min-width: $screen-md) {
        grid-template-columns: 1fr 1fr;
        max-width: calc(#{$projectImageMaxWidth} + #{$spacer * 2});
        margin: 0 auto;
        padding: $spacer $spacer * 3;
    }
}

.title {
    font-size: $font-size-h4;
    opacity: 0;
    position: absolute;
    top: 15%;
    left: 0;
    margin: 0;
    z-index: 2;
    padding: $spacer / 3 $spacer;
    background: rgba($brand-cyan, 0.9);
    transform: translate3d(0, -1rem, 0);
    transition: transform 0.2s ease-out;
}

.project {
    position: relative;

    a {
        display: block;
        position: relative;

        &::after {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            z-index: 1;
            background: transparent;
            transition: background 0.2s ease-out;
        }

        &:hover,
        &:focus {
            &::after {
                background: rgba($brand-cyan, 0.05);
            }

            .title {
                opacity: 1;
                color: #fff;
                transform: translate3d(0, 0, 0);
            }

            .imageCount {
                opacity: 1;
                transform: translate3d(0, 0, 0);
            }
        }
    }
}

.imageCount {
    position: absolute;
    bottom: 5%;
    right: 2%;
    color: $brand-cyan;
    font-size: $font-size-small;
    z-index: 10;
    opacity: 0;
    transform: translate3d(0, $spacer / 2, 0);
    transition: transform 0.25s ease-out;

    svg {
        fill: currentColor;
        width: $font-size-base;
        height: $font-size-base;
    }
}