.filter-bar {
    margin-bottom: 32px;
}

.project-list-preload {
    margin-bottom: 32px;
}

.project-list-preload,
.project-list {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.project-list-preload .project,
.project-list .project {
    width: 100%;
    opacity: 1;
    display: flex;
    align-items: flex-end;
    height: 300px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    min-width: 280px;
}

@media (min-width: 768px) {
    .project-list-preload .project,
    .project-list .project {
        width: calc(50% - 8px);
    }
}

@media (min-width: 1024px) {
    .project-list-preload .project,
    .project-list .project {
        width: calc(33% - 8px);
    }
}

/* Project image */
.project-image {
    width: 100%;
    object-fit: cover;
    height: 100%;
}

/* Project Content */
.project-content {
    flex-grow: 1;
    padding: 8px;
    background-color: hsl(347, 100%, 45%, 60%);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    cursor: initial;
}

.project-content * {
    margin-bottom: 0;
    font-size: 1em;
    color: #fff !important;
}

.project-content > * + * {
    margin-top: 0.5rem;
}

.project-content .project-title {
    font-size: 1.5em;
    margin-top: 0;
}

/* Hide everything except project title */
.project-content .project-title ~ * {
    display: none;
}

/* When hovered over project, show hidden content */
.project:hover .project-content *,
.project:focus .project-content * {
    display: block;
}

/* Lightbox
---------------------------------------------- */
.project-lightbox {
    position: fixed;
    z-index: 99999;
    padding-top: 20px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: hsl(0, 0%, 0%, 80%);
    cursor: pointer;
}

.project-lightbox__content {
    position: relative;
    background-color: transparent;
    margin: auto;
    padding: 0;
    width: 90%;
    max-width: 1200px;
    max-height: 90vh;
}

.project-lightbox__image {
    display: block;
    width: 100%;
    height: 100%;
    max-height: calc(90vh - 100px);
    object-fit: contain;
}

.project-lightbox__title {
    color: #fff;
    text-align: center;
    font-size: 1.4em;
}

.project-lightbox__close {
    color: #fff;
    background-color: transparent;
    font-size: 1rem;
    font-weight: bold;
    padding: 0.5rem 1rem;
    cursor: pointer;
    width: 3rem;
    margin: 0 auto;
    display: block;
}