.project-top-content {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xl-2xl);
    align-items: center;

    h1 {
        margin-top: 0;
    }

    img {
        align-items: center;
        width: 100%;
        height: min(25rem, 100vw - var(--space-xl));
        object-fit: contain;
    }

    video {
        align-items: center;
        width: 100%;
        height: min(24.8rem, 100vw - var(--space-xl));
        max-height: fit-content;
        object-fit: contain;
    }
}


.project-top-content>* {
    flex-grow: 1;
    flex-basis: 500px;
}


.project-about {
    display: flex;
    justify-content: center;
    gap: 2rem;
}

.project-about-content {
    width: 100%;
    background-color: var(--color-cards);
}

.project-content-background {
    background-color: var(--color-cards);
}

.project-text-padding {
    padding: 2rem 3rem;
}

.project-side-by-side {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s-m);
    padding: 2rem 0px;

    h4 {
        margin-top: 0;
    }

    img {
        width: 50%;
        height: 100%;
        object-fit: cover;
    }

    iframe {
        width: 100%;
        height: 500px;
        object-fit: cover;
    }
}

.project-button {
    background: none;
    color: inherit;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;
    display: flex;
    align-items: center;
    gap: 0.5rem;

    img {
        width: 2.5rem;
        height: 2.5rem;

    }
}

.iframe-img {}

.project-side-by-side[data-layout="only-img"] {
    img {
        width: 30%;
    }
}

.project-side-by-side>* {
    flex-grow: 1;
    flex-basis: 500px;
}

.project-pages-img {
    display: flex;
    justify-content: center;
    gap: 3rem;
    padding: 1rem 0rem;

    img {
        width: 100%;
        height: min(3rem, 100vw - var(--space-xl));
        object-fit: cover;
    }
}

@media screen and (max-width: 1350px) {
    .project-top-content {
        flex-direction: column-reverse;
        gap: 0;

        h1 {
            margin-top: 2rem;
        }
    }

    .project-top-content>* {
        flex-grow: 1;
        flex-basis: 0px;
    }

    .project-about {
        flex-direction: column;
        gap: 1rem;
    }

    .project-about-content {
        width: auto;
    }

    .project-text-padding {
        padding: 0.5rem 1rem;
    }

    .project-side-by-side {
        flex-direction: column;
        gap: 0;
        padding: 0px;

        h4 {
            margin-top: 1.67rem;
        }

        img {
            width: 100%;
        }

        iframe {
            width: 100%;
        }
    }

    .project-side-by-side>* {
        flex-grow: unset;
        flex-basis: unset;
    }

    .project-side-by-side[data-layout="column-reverse"] {
        flex-direction: column-reverse;
    }

    .project-side-by-side[data-layout="only-img"] {
        gap: 1rem;

        img {
            width: 100%;
        }
    }

    .iframe-img {
        overflow: scroll;
        overflow-x: scroll;
        overflow-y: scroll;
        max-height: 25rem;
        max-width: 100%;


        img {
            width: 200rem;
            height: auto;
            /* object-fit: none; */
        }
    }
}