.project-card{
    --project-color: var(--color-1);
    --project-color-rgb: var(--color-1-rgb);
    background: var(--color-background-alt);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    border-radius: 22px 8px 22px 8px;
    overflow: hidden;


    width: 100%;
    min-height: 100%;
    display: flex;

    &.project-card--cor1{
        --project-color: var(--color-1);
        --project-color-rgb: var(--color-1-rgb);
    }

    &.project-card--cor2{
        --project-color: var(--color-2);
        --project-color-rgb: var(--color-2-rgb);
    }

    &.project-card--cor3{
        --project-color: var(--color-3);
        --project-color-rgb: var(--color-3-rgb);
    }

    &.project-card--cor4{
        --project-color: var(--color-4);
        --project-color-rgb: var(--color-4-rgb);
    }

    .project-card__link{
        display: flex;
        width: 100%;
        flex: 1 1 auto;
        flex-direction: column;
        gap: 0;
        color: var(--color-text);
        text-decoration: none;
        min-height: 100%;
        justify-content: space-between;

        &:hover,
        &:focus-visible{
            color: var(--color-text);

            .project-card__image-element{
                transform: scale(1.025);
            }
        }

        &:focus-visible{
            outline: 2px solid var(--project-color);
            outline-offset: 6px;
        }
    }

    .project-card__content{
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 20px;
        justify-content: space-between;
        .project-card__top{
            flex-direction: column;
            align-items: flex-start;
            gap: 5px;
            display: flex;

        }
    }

    .project-card__title{
        width: 100%;
        margin: 0;
        font-weight: 700;
        color: var(--color-text);
    }

    .project-card__municipios{
        display: flex;
        align-items: center;
        gap: 8px;
        color: var(--project-color);

        i{
            flex: 0 0 auto;
            color: inherit;
        }

        @media(max-width: 767px){
            font-size: 17px;
        }
    }

    .project-card__areas{
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 4px;
    }

    .project-card__area-group{
        --area-color: var(--color-1);
        --area-color-rgb: var(--color-1-rgb);

        display: contents;

        &.project-card__area-group--cor1{
            --area-color: var(--color-1);
            --area-color-rgb: var(--color-1-rgb);
        }

        &.project-card__area-group--cor2{
            --area-color: var(--color-2);
            --area-color-rgb: var(--color-2-rgb);
        }

        &.project-card__area-group--cor3{
            --area-color: var(--color-3);
            --area-color-rgb: var(--color-3-rgb);
        }

        &.project-card__area-group--cor4{
            --area-color: var(--color-4);
            --area-color-rgb: var(--color-4-rgb);
        }
    }

    .project-card__area-parent,
    .project-card__area-child{
        display: inline-flex;
        align-items: center;
        min-height: 30px;
        padding: 6px 13px;
        border: 1px solid rgba(var(--area-color-rgb), 0.3);
        border-radius: 999px;
        color: var(--area-color);
        font-size: 13px;
        font-weight: 600;
        line-height: 1.2;
    }

    .project-card__area-parent{
        background: var(--area-color);
        color: var(--color-white);
    }

    .project-card__area-child{
        background: rgba(var(--area-color-rgb), 0.1);
    }

    .project-card__image{
        width: 100%;
        flex: 0 0 auto;
        aspect-ratio: 16 / 9;
        margin: 0;
        overflow: hidden;

        border-top: 3px solid var(--project-color);
        background: var(--color-background-alt);
    }

    .project-card__image-element,
    .project-card__image-placeholder{
        display: block;
        width: 100%;
        height: 100%;
    }

    .project-card__image-element{
        object-fit: cover;
        transition: var(--transition-fast);
    }

    .project-card__image-placeholder{
        background: linear-gradient(135deg, rgba(var(--project-color-rgb), 0.14), var(--color-background-alt));
    }

}

.projetos-relacionados__carrossel .owl-stage-outer{
    overflow: visible !important;
    .owl-item{
        transition: var(--transition-fast);

        @media(min-width: 992px){
            
            opacity: 0;
            pointer-events: none;
            &.active{
                pointer-events: inherit;
                opacity: 1;
            }
        }
    }
}
.projetos-relacionados__carrossel .owl-item {
    display: flex;
    height: auto;


    @media(max-width: 991px){

        .project-card{
            width: 360px;
        }
    }
    @media(max-width: 575px){
        .project-card{
            width: 320px;

            .h4{
                font-size: 20px;
            }
        }

    }
}
#lista-posts{
    &.project-list{
        display: flex;
        flex-direction: column;
        margin-right: 0;
        margin-left: 0;
            row-gap: 40px;
        .row{
            margin-left: -15px;
            margin-right: -15px;
            row-gap: 40px;
        }
    }
}