dialog.portfolio {
    width: 100%;
    height: 100%;
    padding: var(--padding);
    border: none;
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(15px);
    
    div {
        height: 100%;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    button.portfolio-close {
        position: fixed;
        top: var(--padding);
        right: var(--padding);
        z-index: 999;
    }

    a.portfolio-open-full-quality {
        position: fixed;
        bottom: var(--padding);
        right: var(--padding);
        z-index: 999;
    }
    
    img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
}

.portfolio-section {
    > div {
        width: fit-content;
        > button {
            display: contents;
        }
    } 
}

.gallery {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.gallery-row {
    display: flex;
    width: 100%;
    gap: 5px;
    
    > div > button {
        all: unset;
        background-color: var(--bg);
        display: block;
        transition: all var(--transition-fast);
        &:hover, &:focus {
            cursor: zoom-in;
            border-radius: 1rem;
        }
        > img {
            border-radius: inherit;
            width: 100%;
            height: auto;
            object-fit: cover;
            display: block;
        }
    }    
}

.portfolio-card {
    img {
        height: 15rem;
        object-fit: cover;
    }
}

@media (prefers-color-scheme: dark) {
    dialog.portfolio {
        background-color: rgba(0, 0, 0, 0.9);
        a.portfolio-open-full-quality {
            color: var(--contrast-light);
            &[target="_blank"]:after {
                background-color: var(--contrast-light);
            }
        }
        a.portfolio-open-full-quality:hover {
            color: var(--accent-contrast);
            &[target="_blank"]:after {
                background-color: var(--accent-contrast);
            }
        }
    }
}