.projects-wrapper {
    padding-top: 1px;
    --b: var(--shadow-blur-md);
    box-shadow: 0 calc(var(--b) * -0.5) var(--b) calc(var(--b) * -0.5) var(--bg-voidlike);
    position: relative;
    z-index: 10;
}

#projects {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);

    &.masonry {
        flex-direction: row;
        align-items: flex-start;
        margin: 0 var(--space-md);
    }
}

.project {
    display: flex;
    background-image: none;
    box-shadow: 0 0 var(--shadow-blur-md) var(--shadow-spread-lg) var(--bg-surface);
    border-radius: var(--space-md);
    min-height: 30dvh;
    max-width: 60rem;
    width: 95%;
    margin: var(--space-lg) auto;
    overflow: hidden;
    flex-direction: column-reverse;

    &.highlight {
        border: 2px solid var(--accent);
    }

    &.normal {
        border: 2px solid var(--primary);
    }

    &.archive {
        border: 2px solid var(--fg-abyss);
    }

    &:not(.pj-in-cl) {
        @media (orientation: landscape) {
            flex-direction: row;

            .media-container {
                min-width: 0;
                container-type: size;

                img, video {
                    width: 100cqw;
                    height: 100cqh;
                }
            }
        }
    }

    .project-details {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        padding: var(--space-md);
        background-color: var(--bg-default);

        h2 {
            margin-top: calc(var(--space-xxs) * -1);
            margin-bottom: var(--space-xxs);
            text-align: left;
        }

        p {
            color: var(--fg-p);
            font-size: var(--font-md);
            margin-bottom: var(--space-lg);
        }

        .badges {
            display: flex;
            flex-wrap: wrap;
            gap: var(--space-sm);
            margin-top: auto;
            margin-bottom: var(--space-lg);
            justify-content: center;
            justify-items: center;
            align-items: center;
            width: 100%;

            a {
                background: var(--bg-surface);
                padding: var(--space-xxs) var(--space-sm);
                border-radius: var(--radius-pill);
                font-size: var(--font-md);
                font-weight: bold;
                border: 1px solid var(--fg-p);
                transition: 0.2s;
                display: inline-block;

                &[href]:hover {
                    transform: scale(1.15);
                    background: var(--bg-float);
                    color: var(--fg-base);
                }
            }
        }

        .control {
            display: inline-flex;
            flex-direction: row;
            align-items: stretch;
            align-self: center;
            margin-bottom: var(--space-xxs);

            .btn-source {
                font-size: var(--font-md);
                font-weight: bolder;
                cursor: pointer;
                display: inline-flex;
                align-items: stretch;
                overflow: hidden;
                --br: var(--radius-lg);
                border-radius: var(--br);
                border: 1px solid var(--fg-abyss);

                .icon-side {
                    background-color: var(--bg-float);
                    border-radius: var(--br) 0 0 var(--br);
                    font-size: var(--font-xl);
                    width: 100%;
                    padding-inline: var(--space-xxs);
                }

                span {
                    background-color: var(--btn-ghost-border-clr);
                    border-radius: 0 var(--br) var(--br) 0;
                    padding-left: var(--space-xs);
                    padding-right: var(--space-xs);
                    font-size: var(--font-lg);
                    display: inline-flex;
                    align-items: center;
                }

                transition: all 0.3s ease;
                &:hover {
                    filter: brightness(1.1);
                    transform: scale(1.05) translateY(3%);
                }
            }

            .date {
                font-size: var(--font-sm);
                color: var(--fg-p);
                padding: 0 var(--space-xs);

                .date-name {
                    color: var(--fg-default);
                }
            }
        }
    }

    .media-container {
        flex: 1;
        background-color: var(--bg-img);
        display: flex;
        position: relative;
        overflow: hidden;
        isolation: isolate;
        min-height: 0;

        img, video {
            background: transparent;
            margin: auto;
        }

        .main-media, .bg-blur {
            transition: opacity 0.2s;
        }

        .bg-blur {
            z-index: 1;
            position: absolute;
            object-fit: cover;
            filter: blur(var(--softness-xl)) opacity(0.5);
            background-color: var(--bg-voidlike);
            image-rendering: smooth;
            width: 100%;
            height: 100%;
        }

        .main-media {
            z-index: 2;
            position: relative;
            object-fit: contain;
            image-rendering: high-quality;

            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: var(--fg-abyss);
            font-family: sans-serif;

            max-width: 100%;
            max-height: 40dvh;
            margin: auto;

            font-size: clamp(var(--font-sm), var(--font-xl), var(--font-xxl));
        }
    }
}