.projects.container {
    padding: 0;
    display: flex;
}

/* Sidebar area */
#projects .filter-group {
    padding: 8px;
    box-shadow: var(--box-shadow-light);
}
#projects .sidebar-toggle-projects {
    padding: 0;
    width: 100%;
    cursor: pointer;
    font-size: 24px;
    align-items: center;
    display: inline-flex;
    justify-content: center !important;
}
#projects .filterbar-content {
    padding: 0 8px 8px 8px;
    min-height: -webkit-fill-available;
    background-color: var(--bs-body-bg);
}
#projects #projects-sidebar-close-btn {
    right: 8px;
    color: red;
    font-size: 24px;
    position: absolute;
    background: transparent;
}
@media (max-width: 960px) {
    #projects .filterbar-content {
        overflow-y: auto;
        z-index: 1040;
    }
}
@media (min-width: 960.02px) {
    #projects .sidebar-toggle-projects {
       display: none;
    }
    #projects #projects-sidebar-close-btn {
        display: none;
    }
}

/* Projects area */
#projects .projects-content-container{
    width: 100%;
}

#projects .project-card {
    text-decoration: none;
}
#projects .project-body > * {
    padding: .25rem;
}

#projects .project-img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

#projects .project-intro {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}
    #projects .project-intro p {
        margin: 0;
    }

/* Tiles view */
#projects.view-tiles .project-meta {
    border-top: 1px solid var(--bs-card-border-color);
}
#projects.view-tiles .project-intro {
    display: none;
}

/* List view */
#projects.view-list .project {
    flex: 0 0 100% !important;
}

#projects.view-list .project-card {
    flex-direction: row;
}

#projects.view-list .project-body {
    width: 100%;
}

#projects.view-list .image-container .project-img {
    border-radius: var(--bs-border-radius);
    max-width: 220px;
}

#projects.view-list .project-meta {
    margin-left: auto;
}

@media (max-width:767.98px) {
    #projects .project-intro {
        display: none;
    }

    #projects.view-list .project-meta {
        border-top: 1px solid var(--bs-card-border-color);
    }
}
@media (min-width:768px) {
    #projects.view-list .project-body {
        display: flex;
    }

    #projects.view-list .project-meta {
        min-width: 35%;
        max-width: 35%;
        border-left: 1px solid var(--bs-card-border-color);
    }
}