.projects-container{
    display: flex;
    flex-direction: column;
    padding: 100px var(--container-space) 10vh;
    gap: 5rem;
    & .projects-content{
        display: flex;
        flex-direction: column;
        & .wp-block-button.is-style-violet{
            & a{
                width: fit-content;
            }
        }
    }
    & .projects-cards{
        display: flex;
        justify-content: space-between;
        width: 100%;
        overflow: hidden;
        &.mobile{
            display: none;
        }
        & .projects-cards-col{
            display: flex;
            flex-direction: column;
            width: 30%;
            gap: 2rem;
            & .projects-card{
                display: flex;
                width: 100%;
                height: 400px;
                flex-direction: column;
                border-radius: 10px;
                overflow: hidden;
                position: relative;
                & img, & video{
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                }
                & h3{
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    width: 100%;
                    color: white;
                    padding: 1rem;
                    font-size: var(--wp--preset--font-size--s-title);
                    text-align: center;
                    margin: 0;
                }
            }
            &.col-1{
                transform: translateY(150px);
            }
            &.col-2{
                transform: translateY(300px);
            }
        }
    }
}
@media (max-width: 768px) {
    .projects-container{
        padding: 120px calc(var(--container-space)/2) 10vh;
        & .projects-cards{
            &.mobile{
                display: flex;
            }
            &.desktop{
                display: none;
            }
            & .projects-cards-col{
                display: flex;
                flex-direction: column;
                width: 49%;
                gap: 1rem;
                & .projects-card{
                    height: 200px;
                }
                &.col-1{
                    transform: translateY(0);
                }
                &.col-2{
                    transform: translateY(0);
                }
            }
        }
    }
}