.home-projects-list,
.home-project {
    align-items: center;
    background-image: url('/images/project-selector.jpg');
    background-position: center center;
    background-size: cover;
    display: flex;
    height: 100%;
    justify-content: center;
    left: 0;
    padding: 0;
    position: fixed;
    top: 0;
    width: 100%;
}

.all-projects {
    background-color: rgba(0, 0, 0, .5);
    flex-grow: 0;
    flex-wrap: wrap;
    margin-left: 2rem;
    min-width: 285px;
    padding: 1rem;
    h1 {
        color: $whitish;
        padding-left: 1rem;
    }
    .v-pagination-list {
        height: 385px;
    }
    ul {
        left: 0;
        margin-bottom: 0;
        position: relative;
        top: 0;
        width: 100%;
    }
    li {
        border-bottom: 2px solid $gray;
        a {
            @extend %large;
            @extend %title;
            color: $whitish;
            display: block;
            padding: 1rem;
            text-transform: uppercase;
            width: 100%;
            &.active,
            &:hover {
                @include transition (background-color .3s linear);
                background-color: $gray;
                .icon {
                    @include transition (opacity .3s linear);
                    opacity: 1;
                }
            }
        }
    }
    .create-project-button-wrapper {
        position: relative;
        width: 100%;
    }
    .button-green {
        color: $whitish;
        left: 0;
        position: absolute;
        text-align: center;
        top: 0;
        width: 100%;
    }
    .v-pagination-next {
        margin-bottom: 1rem;
    }
}

.home-projects-list-inner {
    display: flex;
    height: 575px;
    max-width: 1300px;
}

.recent-projects {
    display: flex;
    flex-grow: 0;
    flex-wrap: wrap;
    margin: 0;
    li {
        background-color: rgba(255, 255, 255, .5);
        display: flex;
        flex-grow: 0;
        flex-shrink: 0;
        flex-wrap: wrap;
        height: 280px;
        margin-right: 1rem;
        max-width: 23.5%;
        min-width: 231px;
        padding: 2rem;
        &:nth-child(-n+4) {
            margin-bottom: 1rem;
        }
        &:nth-child(4n) {
            margin-right: 0;
        }
    }
    h2,
    a,
    p {
        color: $whitish;
    }
    .project-content,
    .project-link {
        min-width: 100%;
    }
    .project-link {
        align-self: flex-end;
    }
    .button-gray {
        text-align: center;
        width: 100%;
    }
}