/* SECTIONS */
.header { 
    position: fixed;
    top: var(--margin);
    left: var(--margin);
    z-index:200;
}


.info, *:has(iframe) {
    width:100%;
}

sup, .specs, .caption {
    font-size:.55rem;
    line-height: var(--line-height);
}

sup {
    position:relative;
    top:-.5em;
    display:inline;
}

.description {
    line-height: calc(var(--line-height)*1.1);
    padding:.5em 0;
}

gallery-item:not(:has(iframe)) {
    /* Can't apply all this to iframe, as it doesn't have intrinsic width and needs to be set at width:100%*/
    /* width: fit-content;  */
    display: grid;
    justify-content: center;
    justify-items:center;
}

picture {
    max-height: inherit;
    width: fit-content;
    display: flex;
    justify-content: center;
}

/* CSS styling for media here defaults to assuming images are landscape and therefore width:100%. Special case treatment for portrait media is in project.js */
gallery-item img, gallery-item video, gallery-item iframe {
    max-width: 100%;
    height: auto;
    /* object-fit: contain; */
    display: block;

    max-height:100dvh; /*Added this so that when videos load initially (on slow connection), they still mostly fill inside the viewport*/
}

.caption {
    padding: .5em 1em;
    width: 100%;
    background: rgb(240, 240, 240);
}

/* MEDIA QUERIES */
@media screen and (max-width: 1200px) {
    .header {
        position:relative;
        width:100%;
        top:0;
        left:0;
        padding-bottom: calc(var(--margin)/2);
    }
}