/* Version: 0.0.52

Theme 

Theme Name: ZH.com */
:root {
    --color-1-1: #ffe600;
    --color-1-2: #b5ffc2;
    --color-1-3: #008aa1;

    /* apricot yellow, turquoise green, antwarp blue - https://sanzo-wada.dmbk.io/combination/163 */
    --color-2-1: #d1bd19;
    --color-2-2: #ff5200;
    --color-2-3: #0f261f;

    /* Olive ocher, orange, deep slate green -  https://sanzo-wada.dmbk.io/combination/149 */
    --color-3-1: #d1bd19;
    --color-3-2: #ffab00;
    --color-3-3: #29bdad;

    /* olive ocher, orange yellow, cerulian blue - https://sanzo-wada.dmbk.io/combination/148 */
    /* grid styles */
    /* portfolio with overlay */
    --grid-style-1__portfolio-with-overlay: ". . ."
        ". item-1 ."
        ". item-2 item-3";
}

@layer portfolio {
    @layer portfolio-with-overlay {
        #portfolio-with-overlay {
            display: grid;
            grid-template-areas: var(--grid-style-1__portfolio-with-overlay);
            grid-template-columns: [start-item-3] .1fr 1fr .1fr [end];
            grid-template-rows: [start-item-3] auto auto auto [end];
            padding: 2em;
        }

        #main-content {
            grid-area: item-1;
            margin-bottom: 2.5em;
            padding: .5em;
            display: flex;
            flex-direction: column;
        }

        #overlay {
            background-color: #000;
            color: #fff;
            opacity: .4;
            grid-area: item-1;
            transform: scale(1.1) translateY(16px);
        }

        #coming-soon-overlay {
            position: relative;

            /* transform:  rotate(-10deg); */
            /* background-color: #000; */
            color: #fff
            /* opacity: .2; */;
            display: flex;
            grid-area: item-1;
            font-weight: 700;
            justify-content: center;
            align-self: center;
            font-size: 2em;
        }
    }
}

/* background colors */
.bg-1-1 {
    background-color: var(--color-1-1);
}

.bg-1-2 {
    background-color: var(--color-1-2);
}

.bg-1-3 {
    background-color: var(--color-1-3);
}

.bg-2-1 {
    background-color: var(--color-2-1);
}

.bg-2-2 {
    background-color: var(--color-2-2);
}

.bg-2-3 {
    background-color: var(--color-2-3);
}

.bg-3-1 {
    background-color: var(--color-3-1);
}

.bg-3-2 {
    background-color: var(--color-3-2);
}

.bg-3-3 {
    background-color: var(--color-3-3);
}

/* text colors */
.text-1-1 {
    background-color: var(--color-1-1);
}

.text-1-2 {
    background-color: var(--color-1-2);
}

.text-1-3 {
    background-color: var(--color-1-3);
}

.text-2-1 {
    background-color: var(--color-2-1);
}

.text-2-2 {
    background-color: var(--color-2-2);
}

.text-2-3 {
    background-color: var(--color-2-3);
}

.text-3-1 {
    background-color: var(--color-3-1);
}

.text-3-2 {
    background-color: var(--color-3-2);
}

.text-3-3 {
    background-color: var(--color-3-3);
}

.block-projects-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    grid-template-rows: auto;
}

@media (max-width:767px) {
    .block-projects-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        grid-template-rows: auto;
    }
}

.block-projects-container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 100px;
}

@media (min-width:900px) {
    .grid-wrapper-1 {
        display: grid;
        grid-template-areas: "is-grid__section-1"
    "is-grid__section-2";
        grid-template-columns: auto 1fr;
        grid-gap: 3rem;
    }

    .grid-wrapper-2 {
        display: grid;
        grid-template-areas: "is-grid__section-1"
    "is-grid__section-2";
        grid-template-columns: 1fr 1fr;
        grid-gap: 4em;
    }

    .spacer-1 {
        padding-left: 2em;
        padding-top: 2em;
    }
}

.grid-wrapper-1 {
    display: grid;
    grid-template-areas: 'is-grid__section-1' 'is-grid__section-2';
}

.grid-wrapper-2 {
    display: grid;
    grid-template-areas: 'is-grid__section-1' 'is-grid__section-2';
}