@property --sidebar-width {
    syntax: "<length>";
    inherits: false;
    initial-value: 20vw;
}

@property --content-height {
    syntax: "<length>";
    inherits: false;
    initial-value: 86vh;
}

/* Reset */
* {
    margin: 0;
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

/* =========================
   MAIN GRID LAYOUT
   ========================= */

body {
    --top-bar-icons-spacing: 3rem;
    --sidebar-width: 20vw;

    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;

    /* Minimum needed by top-bar, maximum 16vh */
    grid-template-rows: minmax(min-content, 16vh) 1fr;

    min-height: 100vh;

    transition:
        grid-template-columns 0.5s ease,
        grid-template-rows 0.5s ease,
        --sidebar-width 0.5s ease;
}

body[data-mode="thumbnail"] {
    --sidebar-width: 30vw;
    --top-bar-icons-spacing: 0rem;

    grid-template-rows: 100vh 0;

    .image-wrapper,
    .top-images {
        display: none;
    }
}

/* Assign areas */
.icon-corner {
    grid-column: 1;
    grid-row: 1;
    /* background: #222; */
}

.top-bar {
    grid-column: 2;
    grid-row: 1;
    /* background: #444; */
}

.side-bar {
    grid-column: 1;
    grid-row: 2;
    /* background: #666; */
}

.document {
    grid-column: 2;
    grid-row: 2;
    /* background: #ddd; */
}

.document {
    /* document contains a one-cell grid */
    display: grid;
}

/* document's children overlap each other */
.document>* {
    grid-area: 1 / 1;
}

/* =========================
   TOP BAR LAYOUT
   ========================= */

.top-bar {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: 0 var(--top-bar-icons-spacing) 0 0;
    color: white;
}

/* Left text container */
.top-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Right images */
.top-images {
    display: flex;
    align-items: center;
    gap: var(--top-bar-icons-spacing);
    height: 50%;
}

.img-wrapper {
    height: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}

.img-wrapper img {
    height: 70%;
    /* fill top bar height */
    width: auto;
    object-fit: contain;
}

.side-bar {
    width: 100%;
    height: 100%;
}

/* This item must NOT influence the row's intrinsic height */
.icon-corner {
    contain: size;
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 0;
    min-height: 0;
}

.project-icon {
    display: block;
    width: auto;
    height: 100%;
    max-width: 100%;
}

/* =========================
   RESPONSIVE RULE
   Hide left column if
   width < height / 3
   => width/height < 1/3
   ========================= */

@media (max-aspect-ratio: 4/5) {
    body {
        --sidebar-width: 0vw;
    }

    .image-wrapper,
    .top-images {
        display: none;
    }
}

/*hide images with no source*/
img[src=""] {
    visibility: hidden;
}