/* SVG Morph */
    .morph-wrap {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: none;
    }
    
    .morph {
        position: relative;
        height: 100%;
        fill: #e0e41e;
        flex: none;
    }
    
    .content-wrap {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        /* align-items: center; */
        width: 100%;
        /* height: 100vh; */
        /* min-height: 800px; */
        pointer-events: none;
/*         margin: 4em auto; */
    }
    
    .content {
        position: relative;
        /* display: grid; */
    }
    
    .content--fixed a {
        pointer-events: auto;
    }
    
    .content--layout {
        pointer-events: auto;
        justify-content: center;
        align-content: center;
        /* grid-template-columns: 150px 150px 150px 150px; 
        grid-template-rows: 150px 75px 75px;
        grid-template-areas:	"... title title title"
                                "author ... desc desc"
                                "author ... link link"; */
    }
    
    .content--related {
        text-align: center;
        align-content: center;
        justify-content: center;
        padding: 0 2em;
        min-height: 600px;
        height: 100vh;
        font-size: 0.85em;
    }
    
    .content__img {
        grid-column: 1 / 3;
        grid-row: 1 / 3;
        opacity: 0.8;
        width: 300px;
        height: 300px;
    }
    
    .content__title {
        grid-area: title;
        font-family: 'nexa_boldregular', sans-serif;
        letter-spacing: -0.025em;
        font-size: 8em;
        line-height: 160px;
        margin: 0;
        text-transform: lowercase;
        z-index: 10;
        cursor: default;
    }
    
    .content__author {
        grid-area: author;
        margin: 0;
        -webkit-writing-mode: vertical-lr;
        writing-mode: vertical-lr;
        padding: 1em;
        text-align: right;
        z-index: 10;
        cursor: default;
    }
    
    .content__desc {
        grid-area: desc;
        margin: 0;
        z-index: 10;
        padding: 0 1em;
        cursor: default;
    }
    
    .content__img,
    .content__title,
    .content__author,
    .content__desc {
        transition: transform 0.3s ease-out;
    }
    
    .content__link {
        pointer-events: auto;
        grid-area: link;
        align-self: end;
        justify-self: start;
        z-index: 10;
        padding: 0 1em 0.15em;
    }
    
    .content__info {
        grid-column: 1 / 3;
    }
    
    .content__related-item {
        padding: 1em;
        transition: color 0.3s;
    }
    
    .content__related-img {
        max-width: 100%;
        opacity: 0.8;
        transition: opacity 0.3s;
    }
    
    .content__related-item:hover .content__related-img,
    .content__related-item:focus .content__related-img {
        opacity: 1;
    }
    
    .content__related-title {
        font-size: 1em;
        margin: 0;
        padding: 0.5em;
    }
    
    /* Different layouts */
    
    /* layout-2 */
    .content--layout-2 {
        grid-template-areas:	"... title title title"
                                "desc desc ... author"
                                "link link ... author";
    }
    
    .content--layout-2 .content__img {
        grid-column: 3 / 5;
        grid-row: 1 / 3;
    }
    
    .content--layout-2 .content__desc {
        text-align: right;
    }
    
    .content--layout-2 .content__link {
        justify-self: end;
    }
    
    .content--layout-2 .content__author {
        justify-self: end;
        align-self: start;
    }
    
    /* layout-3 */
    .content--layout-3 {
        grid-template-rows: 75px 75px 150px;
        grid-template-areas:	"... ... desc desc"
                                "author title title title"
                                "author ... link link";
    }
    
    .content--layout-3 .content__img {
        grid-column: 1 / 3;
        grid-row: 1 / 3;
    }
    
    .content--layout-3 .content__desc {
        align-self: end;
    }
    
    /* layout-4 */
    
    .content--layout-4 {
        grid-template-areas:	"title title title desc"
                                "... author ... desc"
                                "... author ... link";
    }
    
    .content--layout-4 .content__img {
        grid-column: 2 / 4;
        grid-row: 1 / 3;
    }
    
    .content--layout-4 .content__author {
        justify-self: start;
        align-self: start;
    }
    
    /* Header */
    /* Demos */
    .demos {
        grid-area: demos;
        align-self: end;
    }
    
    .demo {
        display: inline-block;
        position: relative;
        font-size: 0.85em;
        margin: 0 0.25em 0.5em 0;
        padding: 1em;
    }
    
    .demo .decoshape {
        display: none;
    }
    
    .demo--current {
        color: var(--link-hover-color);
        border-color: currentColor;
    }
    
    .demo--current .decoshape {
        display: block;
        z-index: -1;
    }
    
    /* Deco elements */
    .deco {
        pointer-events: none;
    }
    
    .deco--title {
        grid-area: decotitle;
        -webkit-writing-mode: vertical-lr;
        writing-mode: vertical-lr;
        text-align: right;
        align-self: end;
        justify-self: end;
    }
    
    /* Top Navigation Style */
    
    /* Demo themes *
    .demo-2 {
        --background-color: #1d1b22;
        --background-color-2: #342560;
        --background-color-3: #553e9a;
        --text-color: #fff;
        --link-color: #f9ed8a;
        --link-hover-color: #fff;
    }
/*  */
    .grid-y.grid-frame {
        
        height: auto;
    }