section {
    width: 100%;
    overflow-x: hidden;
    padding-bottom: var(--padding-page);
}

h2 {
    padding-top: var(--margin-y);
    padding-left: var(--padding-page);
}

.project {
    padding-bottom: var(--margin-y3);
    display: none;
}
.project.visible {
    display: block;
}
@media screen and (max-width: 768px) {
    #projects_grid .project {
        padding-bottom: var(--margin-y);
    }
}

.project_meta {
    padding-top: var(--margin-y);
    padding-right: var(--padding-page);
    padding-bottom: var(--margin-y2);
    padding-left: var(--padding-page);

    line-height: calc(var(--font-size) + var(--margin-y3));
}
#projects_grid .project_meta {
    padding-top: initial;
    padding-bottom: initial;
}
#projects_grid .project:first-of-type .project_meta {
    padding-top: var(--margin-y);
}

.project_meta li {
    display: inline-block;
    margin-right: var(--margin-y2);
}
#projects_grid .project_meta li.role {
    display: none;
}
@media screen and (max-width: 768px) {
    .project_meta li {
        display: block;
        line-height: calc(var(--font-size) + var(--margin-y3));
    }
    .project_meta .tags li,
    .project_meta .role li {
        display: inline-block;
        line-height: initial;
    }
}

.project_meta .tags li,
.project_meta .role li {
    margin-right: initial;
}

.project_meta .tags button {
    opacity: 0.4;
    text-decoration: none;
    cursor: pointer;
}
.project_meta .tags button.selected {
    opacity: 1;
}
.project_meta .tags li:not(:last-of-type) button:after,
.project_meta .role li:not(:last-of-type):after {
    content: ',';
}

.project_meta .tags li .tag_count{
    display: none;
}
.project_meta .tags li:hover .tag_count{
    display: inline;
}

.project_gallery {
    display: flex;
    align-items: center;
    overflow-x: scroll;
}
#projects_grid .project_gallery {
    display: none;
}
.project_gallery::-webkit-scrollbar {
    display: none;
}

.project_gallery li:first-of-type {
    margin-left: var(--padding-page);
}
.project_gallery li {
    margin-right: var(--margin-y3);
}
.project_gallery li:last-of-type {
    margin-right: var(--padding-page);
}

.project_gallery img {
    max-height: 30rem;
    width: auto;
}
@media screen and (max-width: 768px) {
    .project_gallery img {
        max-height: 30vh;
    }
}