.pg_artwork {

    @media (min-width: 1200px) {
        background-color: transparent !important;
    }


    main {
        padding: 0;

        * {
            color: #000;
        }
    }

    .painting-layout {
        padding: 3rem;
        min-height: calc(100vh - var(--header-heigh) - var(--footer-heigh) + 3rem);
        padding-top: calc(var(--header-heigh) + 2rem);
        display: flex;
        flex-direction: column;
        gap: 1rem;
        background: lightgray;

        .visuals {
            display: flex;
            justify-content: center;
            align-items: center; 
            height: unset;
            object-fit: contain;
            background-color: var(--bs-modal-bg);
            padding-bottom: 2rem;

            picture {
                height: inherit;
                img.main-artwork {
                    object-fit: contain;
                    width: 94%;
                    /* height: 100%; */
                    display: block;
                    margin: 0 auto; 
                    padding: 0;

                        box-sizing: border-box;
                        -webkit-box-shadow: 0px 0px 0px 5px #000000, 0px 0px 0px 10px #7B3F00, 0px 7px 17px 17px rgba(0, 0, 0, 0.5), 0px 7px 17px 17px rgba(0, 0, 0, 0.5);
                        box-shadow: 0px 0px 0px 5px #000000, 0px 0px 0px 10px #401701, 0px 7px 17px 17px rgba(0, 0, 0, 0.5), 0px 4px 12px 8px rgba(0, 0, 0, 0.5);




                }
            }
        }
        .details {
            height: unset;
            .specs {
                a.mail_link_available {
                    border: 1px solid #ffffff80;
                    width: max-content;
                    border-radius: 5px;
                    padding: .2rem .5rem;
                    text-shadow: none;
                    background-color: none;
                    background: none;

                    color: var(--secondary-color);
                    font-weight: 400;
                    text-decoration: none;
                    display: flex;
                    align-items: center;
                    &:hover {
                        cursor: pointer;
                        border-color: #fff;
                    }
                    &:after {
                        display: inline-block;
                        width: 1rem;
                        height: 1rem;
                        margin-left: .2em;
                        content: "";
                        background-image: url("/assets/arrow-right-line-secondary-svgrepo-com.svg");
                        background-size: contain;
                        background-repeat: no-repeat;
                        filter: invert(100%);
                        transition: all 0.3s ease;
                    }
                    &:hover:after {
                        margin-left: .5rem;
                    }
                    &:before {
                        width: .9rem;
                        height: .9rem;
                        margin-right: .2rem;
                        background: url('/assets/email-svgrepo-com-black.svg') no-repeat center center;
                        background-size: contain;
                        content: '';
                        display: inline-block;
                        filter: invert(100%);
                    }
                }

                .in_private_collection {
                    display: inline-flex;
                    align-items: center;
                    /* margin-top: .5rem; */
                    border: 1px solid #fff;
                    border-radius: 5px;
                    padding: .2rem .5rem;
                    color: #fff;
                    font-weight: 700;
                    text-shadow: var(--text-shadow-1);
                    background-color: var(--bckg-gold-fallback-color);
                    background:var(--bckg-gold-gradient);
                    &:hover {
                        cursor: not-allowed;
                    }
                }
            }
        }



























        @media (min-width: 1200px) {
            gap: 2rem;
            flex-direction: row;
            padding: 0;
            min-height: calc(100vh - var(--header-heigh) - var(--footer-heigh));
            margin-top: var(--header-heigh);
            * {
                color: #fff;
            }
            .visuals {
                position: relative;
                min-width: calc(100vw - var(--pg-artwork-details-width));

                picture {
                        img.main-artwork {
                            position: absolute;
                            top: 0;
                            left: 50%;
                            transform: translate(-50%, 50px);
                            max-width: 90%;
                            max-height: calc(100vh - var(--footer-heigh) - var(--header-heigh) - 100px);
                            width: auto;
                            height: auto;
                            
                        }
                    /* } */
                }



            }
            .details {
                width: var(--pg-artwork-details-width);
                max-height: ccalc(100vh - var(--footer-heigh) - var(--header-heigh));
                background-color: var(--primary-bg-color);
                .specs {
                    position: sticky;
                    top: var(--header-heigh);
                    background-color: var(--primary-bg-color);
                    padding: 40px 1rem 0;
                    border-bottom: 1px solid rgba(128, 128, 128, 0.5);
                }
                .description-content {
                    overflow-y: auto;
                    padding: 1rem 1rem 2rem;
                    
                }


/* ================================================ */

            .details {
                height: 100%;
                display: flex;
                flex-direction: column;

            }


            .specs {
                position: sticky;
                height: 154px;
                top: 40px;
                background-color: inherit; /* Matches your dark theme */
                z-index: 10;
                padding: 38px 01rem;

                h1 {
                    font-size: 1.5rem;
                    font-weight: 500;
                }

                p {
                    margin-bottom: .5rem;
                    &:last-child {
                        margin-bottom: 0;
                    }
                }

                .specs-line {

                    .size {
                        display: inline-block;
                        position: relative;
                        &::before {
                            position: absolute;
                            left: 1px;
                            bottom: 3px;
                            width: 2rem;
                            height: .5rem;
                            content: "→";
                        }
                        &::after {
                            position: absolute;
                            right: -11px;
                            bottom: 5px;
                            width: .5rem;
                            height: 1rem;
                            content: "↑";
                        }
                    }
                }
            }

            .description-content {
                flex-grow: 1;      /* Takes up remaining space */
                overflow-y: auto;  /* Local scrollbar */
                padding: 1rem; 
                min-height: calc(100vh - var(--header-heigh) - var(--footer-heigh) - var(--pg-artwork-details-specs));
                max-height: calc(100vh - var(--header-heigh) - var(--footer-heigh) - var(--pg-artwork-details-specs));
            }

            .meta-data {
                padding: 1rem 0; 
            }

            /* Scrollbar Styling (Optional, for your dark theme) */
            .description-content::-webkit-scrollbar {
                width: 6px;
            }
            .description-content::-webkit-scrollbar-thumb {
                background: #444;
                border-radius: 10px;
            }

            .visuals {
                height: 100%;
                width: 60%; /* Or whatever your desktop split is */
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 40px; /* This creates a natural "mat" around the painting */
            }

            img.main-artwork {
                max-height: 80% !important; 
                max-width: 100%;
                width: auto;
                height: auto;
                object-fit: contain;
            }

/* ================================================ */

        }
    }

}




    /* Parent container must have a height for children to use % */
    .main-container {
        display: flex;
        height: calc(100vh - var(--header-heigh));
        overflow: hidden; 
    }