.left-page {
    position: absolute;
    top:0;
    width: 50svw;
    height: 100svh;
}

.right-page {
    position: absolute;
    right:0;
    top:0;
    width: calc(50svw - 2rem);
    height: calc(100svh - 3.5rem);

    padding: 1rem 1rem 2.5rem 2rem;
}

.left-page-top-border {
    display: none;
}

.right-page img {
    display: flex;
    margin-bottom: 1rem;
}

.work-thumbnail-dark,
.work-thumbnail-dark-layer,
.work-thumbnail-full {
    display: none;
}

.columnTwo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 2rem;
    height: fit-content;
    max-height: 100%;
    padding-top: calc(1.2rem + 1.4*3rem);
}

    @media (min-width: 721px) and (max-width: 1000px) {    
        .columnTwo {
                display: inherit;
        }
    }

    @media (min-width: 501px) and (max-width: 720px) {
        .columnTwo {
            grid-template-columns: 1fr 1fr;
            column-gap: 0;
        }
    }

    @media (max-width: 500px) {
        .columnTwo {
            padding-top: 0;
            grid-template-columns: 1fr;
        }
    }





.work-info {
    position: static;
    height: fit-content;
    padding: 1rem;
}

.work-form {
    display: block;
    padding: 1rem;
}

.work-form-title {
    width: 100%;
}

.date {
    color: rgb(100, 70, 60, 0.5);
    font-weight: 300;
    letter-spacing: 0.1rem;
    font-style: italic;
}

.work-form-details {
    display: grid;
    grid-template-columns: 1fr 3fr;
    height: fit-content;
}





/* Img Grid System */
.grid-1to2 {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 1rem;
}

.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1rem;
}

.grid-2to1 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1rem;
}

.grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 1rem;
}





/* Img Template  */
.blank-bold {
    width: 100%;
    height: calc(1.4*4rem);
}

.blank-solid {
    width: 100%;
    height: calc(1.4*1.25rem);
}






/* Img Template  */
.center-100 {
    position: relative;
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
}

.center-80 {
    position: relative;
    width: 80%;
    left: 50%;
    transform: translateX(-50%);
}

.center-8060 {
    position: relative;
    width: 60%;
    left: 50%;
    transform: translateX(-50%);
}

.center-6080 {
    position: relative;
    width: 80%;
    left: 50%;
    transform: translateX(-50%);
}

.center-80100 {
    position: relative;
    width: 80%;
    left: 50%;
    transform: translateX(-50%);
}

.center-6080100 {
    position: relative;
    width: 80%;
    left: 50%;
    transform: translateX(-50%);
}

.center-60 {
    position: relative;
    width: 60%;
    left: 50%;
    transform: translateX(-50%);
}





@media (max-width: 720px) {
    .left-page {
        position: static;
        width: 100svw;
        height: inherit;
        padding: 0;
        padding-bottom: 1.4rem;
    }

    .right-page {
        position: static;
        width: calc(100svw - 2rem);
        height: inherit;

        padding: 1rem 1rem 2.25rem 1rem;
    }

    .work-info {
        padding-left: 0.5rem;
    }

    .work-form {
        padding-right: 0.5rem;
    }

    .grid-1 {
        grid-template-columns: 1fr;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        width: 70%;

    }

    .grid-1-S {
        grid-template-columns: 1fr;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        width: 50%;

    }

    .grid-1-L {
        grid-template-columns: 1fr;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        width: 80%;

    }

    .grid-1to2 {
        grid-template-columns: 1fr 1fr;
    }

    .grid-2to1 {
        grid-template-columns: 1fr;
    }





    /* Img Template  */
    .cover-M1-1 {
        aspect-ratio: 1/1;
        object-fit: cover;
    }

    .center-80100 {
        position: relative;
        width: 100%;
        left: 50%;
        transform: translateX(-50%);
    }

    .center-6080100 {
        position: relative;
        width: 100%;
        left: 50%;
        transform: translateX(-50%);
    }

}





@media (max-width: 500px) {
    .left-page {
        background-color: rgb(251, 249, 246);
        width: 100svw;
        margin-top: 125svw;
    }

    .left-page-top-border {
        position: absolute;
        display: block;
        background-color: black;
        width: 100%;
        height: 1px;
        transform: translateY(-1px);

        background: linear-gradient(
            to right,
            rgb(251, 249, 246) 0 4px,
            transparent 4px 12px
        );
        background-size: 14px 4px;
        background-repeat: repeat-x;
    }

    .right-page {
        background-color: rgb(251, 249, 246);
        padding: 4.96rem 1rem 0 1rem;
    }

    .work-thumbnail-dark {
        background: black;
        position: fixed;
        top: -25svw;
        z-index: -1000;
        display: flex;
        width: 100svw;
        height: calc(125svw + 50svw);
    }

    .work-thumbnail-dark img {
        position: relative;
        width: 100%;
        top: 50%;
        transform: translateY(-50%);
        object-fit: contain;
    }

    .work-thumbnail-dark-layer {
        background: black;
        position: fixed;
        top: -25svw;
        z-index: -1000;
        display: flex;
        width: 100svw;
        height: calc(125svw + 50svw);
    }

    .work-thumbnail-dark-layer img.rotate {
        position: relative;
        width: 100%;
        top: 50%;
        object-fit: contain;
        animation: rotate360 12s linear infinite;
    }

    .work-thumbnail-dark-layer img {
        position: absolute;
        width: 100%;
        top: 50%;
        transform: translateY(-50%);
        object-fit: contain;
    }

    @keyframes rotate360 {
        from {
            transform: translateY(-50%) rotate(0deg);
        }
        to {
            transform: translateY(-50%) rotate(360deg);
        }
    }

    .work-thumbnail-full {
        position: fixed;
        top: 0;
        z-index: -1000;
        display: flex;
        width: 100svw;
        height: 125vw;
    }

    .work-form {
        display: block;
        padding-bottom: 0rem;
    }

    .work-info {
        width: calc(75% - 1.5rem);
        margin-left: calc(25% + 0.5rem);
        padding: 0;
    }

    .work-form-title {
        width: calc(100% - 0.5rem);
        display: grid;
        grid-template-columns: 3fr 1fr;
        column-gap: 1rem;
    }

    .work-form-title .date {
        text-align: right;
    }

    #copyright {
        position: static;
        width: 100%;
        margin-bottom: 1rem;
    }
}










@media (min-width: 1600px) {
    .grid-over-2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 1rem;
    }

    .center-6080 {
        position: relative;
        width: 60%;
        left: 50%;
        transform: translateX(-50%);
    }

    .center-6080100 {
        position: relative;
        width: 60%;
        left: 50%;
        transform: translateX(-50%);
    }

    .center-8060 {
    position: relative;
    width: 80%;
    left: 50%;
    transform: translateX(-50%);
    }

}