.thumbnail
{
    width: 100%;
}

#projects > .content
{
    flex-direction: column;
    position: relative;
    overflow-y: clip;
}

#project > .content
{
    flex-direction: column;
}

figure
{
    position: relative;
}

figure .overlay
{
    bottom: 0px;
    width: 100%;
    position: absolute;

    display: flex;
    justify-content: space-between;
    background: var(--trans-dark);
    overflow: hidden;
    pointer-events: none;

    color: var(--white);
    line-height: 30px;
    font-size: 80%;
    text-overflow: ellipsis;
    white-space: nowrap;

    padding: 0 10px;
    box-sizing: border-box;

    height: 0px;
    opacity: 0;
    transition: all ease 0.5s;
}

figure:hover .overlay
{
    height: 35px;
    opacity: 1;
}

.overlay:after, .link:before
{
    content: '\25B8';
    position: relative;
    display: inline-block;
    font-size: 30px;
    transform: skew(10deg, 5deg);
    animation: 0.4s ease-in infinite alternate slide;
}

@keyframes slide
{
    from {left: 0px;}
    to {left: 5px;}
}

.projects-gallery
{
    display: grid;
    overflow: hidden;
    transition: all ease 0.5s 0.4s;
    grid-gap: .8rem 1rem;
    grid-template-columns: repeat(12, 1fr);
}

.projects-gallery.visible
{
    transition-delay: 0s;
}