.single-projects-container {
    display: flex;
    flex-flow: column nowrap;
    gap: 4em;
}

.single-projects__cards {
    margin: -0.5em;

    @media( max-width:768px ) {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        margin: unset !important;
        gap: 1em;
        height: unset !important;
    }

    .single-projects__item-wrapper {
        position: relative;

        .pin-item {
            bottom: 0;
            content-visibility: visible;
            filter: opacity(0);
            padding: 1em;
            position: absolute;
            right: 0;
            transition: 200ms all ease-out;
            visibility: hidden;

            @media( max-width:1024px ) {
                filter: opacity(0.75);
                visibility: visible;
            }
        }

        .pin-item.desktop {
            @media( max-width:1024px ) {
                content-visibility: hidden;
                display: none;
            }
        }

        .pin-item.mobile {
            content-visibility: hidden;
            display: none;

            @media( max-width:1024px ) {
                display: block;
                content-visibility: visible;
            }
        }

        &:hover > .pin-item {
            filter: opacity(1);
            visibility: visible;
        }
    }

    .single-projects__item {
        padding: 0.5em;

        @media( max-width:768px ) {
            padding: unset !important;
            position: unset !important;
            width: 100% !important;
        }

        img {
            aspect-ratio: 1;
            max-width: 100%;
            object-fit: cover;
            width: 100%;
        }
    }
}

.single-projects__item.description-box {
    @media( max-width:768px ) {
        grid-column: 1/-1;
    }

    .description-box__wrapper {
        background-color: #fff;
        padding: 1.875em;

        h1 {
            margin-bottom: 0.15em;
        }
    
        .description-box__body {
            padding-bottom: 1.75em;
            position: relative;

            &::after {
                border-bottom: 1px solid rgba(var(--secondary),0.5);
                content: '';
                left: 50%;
                max-width: 50px;
                position: absolute;
                bottom: 0;
                transform: translateX(-50%);
                width: 100%;
            }

            p {
                margin-bottom: 0.9em;
            }

            p:last-of-type {
                margin-bottom: 0;
            }
        }
    
        .description-box__categories {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1em;
            padding-top: 1.75em;
    
            h4 {
                color: rgb(var(--secondary));
                font-size: 0.9375rem;
                margin-bottom: 0.15em;
                text-transform: uppercase;
            }
    
            span {
                color: var(--bodyColor); 
                font-size: 0.9375rem;
            }
        }
    }
    
}

.project-gallery-popup {
    align-items: center;
    align-items: flex-start;
    background-color: #fff;
    display: flex;
    flex-flow: column nowrap;
    max-width: 500px;
    padding: 1em;

    div {
        color: var(--bodyColor);
        font-size: 0.85rem;
    }
}

.relate-projects {
    max-width: 500px;
    margin: 0 auto;
    text-align: center;

    h2 {
        margin-bottom: 1.5em;
    }

    .relate-projects__item {
        padding: 1.5em 0;
        position: relative;

        a:has(h3):hover {
            text-decoration: none;
        }

        h3 {
            color: rgb(var(--secondary));
            font-size: 0.9375rem;
            margin-bottom: 0.15em;
            text-transform: uppercase;
        }

        p {
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            display:-webkit-box;
            font-size: 0.9375rem;
            overflow: hidden;
        }

        &:first-of-type {
            padding-top: 0;
        }

        &:last-of-type {
            padding-bottom: 0;
        }

        &::after {
            border-bottom: 1px solid rgba(var(--secondary),0.5);
            content: '';
            left: 50%;
            max-width: 70px;
            position: absolute;
            bottom: 0;
            transform: translateX(-50%);
            width: 100%;
        }

        &:last-of-type::after {
            border-bottom: 0;
        }
    }
}

.project-post-menu nav > ul {
    justify-content: center;
}

.post-header .project-title h2::before {
    content: 'Project: ';
}