// 
// Portfolio
// 

.portfolio-item {
    display: block;
    position: relative;
    overflow: hidden;
    max-width: 530px;
    margin: auto auto 1rem;

    .caption {
        display: flex;
        height: 100%;
        width: 100%;
        background-color: fade-out($gray-900, 0.8);
        position: absolute;
        top: 0;
        bottom: 0;
        z-index: 1;

        .caption-content {
            color: $white;
            margin: auto 2rem 2rem;

            h2 {
                font-size: 0.8rem;
                text-transform: uppercase;
            }

            p {
                font-weight: 300;
                font-size: 1.2rem;
            }
        }
    }

    @media(min-width: 992px) {
        max-width: none;
        margin: 0;

        .caption {
            transition: clip-path 0.25s ease-out, background-color 0.7s;
            clip-path: inset(0px);

            .caption-content {
                transition: opacity 0.25s;
                margin-left: 5rem;
                margin-right: 5rem;
                margin-bottom: 5rem;
            }
        }

        img {
            transition: clip-path 0.25s ease-out;
            clip-path: inset(-1px);
        }

        &:hover {
            img {
                clip-path: inset(2rem);
            }

            .caption {
                background-color: fade-out($primary, 0.1);
                clip-path: inset(2rem);
            }
        }
    }
}