.section-1 {
    width: 100vw;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    padding-top: calc(var(--large) + 5rem);
    padding-bottom: var(--large);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: var(--large);
}

.section-1 > div:nth-child(1) {
    width: calc(100vw - 8.625rem - 8.625rem);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: end;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    gap: var(--x-large);
}

.section-1 > div:nth-child(1) > h1 {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    color: var(--orange);
}

.project-category {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: end;
    margin-bottom: var(--small);
    gap: var(--regular);
}

.project-category > a {
    text-decoration: none;
    color: var(--black);
    border-radius: var(--small);
    padding: var(--x-small) var(--regular) var(--x-small) var(--regular);
    -webkit-transition: 369ms var(--ease-out);
    -o-transition: 369ms var(--ease-out);
    transition: 369ms var(--ease-out);
    cursor: pointer;
}

.project-category-active {
    background-color: var(--orange);
}

.project-category-inactive {
    background-color: var(--white);
}

.project-category-inactive:hover {
    background-color: var(--lightorange);
}

.section-1 > div:nth-child(2) {
    width: calc(100vw - 8.625rem - 8.625rem);
    display: -ms-grid;
    display: grid;
    gap: var(--large);
}

.project-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: var(--medium);
}

.project-container > div:nth-child(2) {
    display: -ms-grid;
    display: grid;
}

.project-type-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    gap: var(--large);
}

.project-type {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: var(--small);
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: end;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}

.project-type > a {
    padding: var(--x-small) var(--regular) var(--x-small) var(--regular);
    margin-bottom: var(--x-small);
    border-radius: var(--small);
    cursor: pointer;
    -webkit-transition: 369ms var(--ease-out);
    -o-transition: 369ms var(--ease-out);
    transition: 369ms var(--ease-out);
    text-wrap: nowrap;
}

.project-type-active {
    border: 1.618px solid var(--orange);
    color: var(--orange);
}

.project-type-inactive {
    border: 1.618px solid var(--white);
}

.project-type-inactive:hover {
    border: 1.618px solid var(--lightorange);
    color: var(--lightorange);
}

.project-grid-container {
    width: 100%;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1fr 1fr;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--medium);
}

.project-grid {
    width: 100%;
    min-height: var(--xxxx-large);
    height: 30vh;
    background-color: var(--lightblack);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    -webkit-box-shadow: 0px 8px 32px rgba(13, 13, 13, 0.369);
            box-shadow: 0px 8px 32px rgba(13, 13, 13, 0.369);
    -webkit-transition: 639ms -webkit-box-shadow var(--ease-out);
    transition: 639ms -webkit-box-shadow var(--ease-out);
    -o-transition: 639ms box-shadow var(--ease-out);
    transition: 639ms box-shadow var(--ease-out);
    transition: 639ms box-shadow var(--ease-out), 639ms -webkit-box-shadow var(--ease-out);
}

.project-hide {
    display: none;
}

.project-show {
    display: -ms-grid;
    display: grid;
}

.project-grid > div:nth-child(3) {
    width: 100%;
    height: var(--xx-large);
    -ms-flex-item-align: end;
        align-self: flex-end;
    position: absolute;
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(20, 20, 20, 0.8)), color-stop(rgba(20, 20, 20, 0.6)), to(rgba(20, 20, 20, 0)));
    background: -o-linear-gradient(bottom, rgba(20, 20, 20, 0.8), rgba(20, 20, 20, 0.6), rgba(20, 20, 20, 0));
    background: linear-gradient(0deg, rgba(20, 20, 20, 0.8), rgba(20, 20, 20, 0.6), rgba(20, 20, 20, 0));
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    z-index: 1;
    -webkit-transition: 369ms var(--ease-out);
    -o-transition: 369ms var(--ease-out);
    transition: 369ms var(--ease-out);
    -webkit-transition: 639ms height var(--ease-out);
    -o-transition: 639ms height var(--ease-out);
    transition: 639ms height var(--ease-out);
}

.project-grid > div > h4 {
    -ms-flex-item-align: end;
        -ms-grid-row-align: end;
        align-self: end;
    color: var(--brightwhite);
    margin: 0 var(--regular) var(--small) var(--regular);
}

.project-grid > img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
    -webkit-transition: 369ms var(--ease-out);
    -o-transition: 369ms var(--ease-out);
    transition: 369ms var(--ease-out);
    position: relative;
    background-color: var(--lightblack);
}

.project-grid:hover > img {
    -webkit-transform: scale(1.2);
        -ms-transform: scale(1.2);
            transform: scale(1.2);
}

.project-grid > div:nth-child(2) {
    width: inherit;
    align-self: flex-end;
    display: -ms-grid;
    display: grid;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    height: 0;
    position: absolute;
    z-index: 1;
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(20, 20, 20, 0.8)), color-stop(rgba(20, 20, 20, 0.7)), color-stop(rgba(20, 20, 20, 0.6)), to(rgba(20, 20, 20, 0)));
    background: -o-linear-gradient(bottom, rgba(20, 20, 20, 0.8), rgba(20, 20, 20, 0.7), rgba(20, 20, 20, 0.6), rgba(20, 20, 20, 0));
    background: linear-gradient(0deg, rgba(20, 20, 20, 0.8), rgba(20, 20, 20, 0.7), rgba(20, 20, 20, 0.6), rgba(20, 20, 20, 0));
    -webkit-transition: 369ms var(--ease-out);
    -o-transition: 369ms var(--ease-out);
    transition: 369ms var(--ease-out);
}

.project-grid > h3 {
    opacity: 0;
    color: var(--brightwhite);
    -webkit-transition: 369ms var(--ease-out);
    -o-transition: 369ms var(--ease-out);
    transition: 369ms var(--ease-out);
    -webkit-transition-delay: 100ms;
         -o-transition-delay: 100ms;
            transition-delay: 100ms;
    position: absolute;
    -ms-grid-column-align: center;
        justify-self: center;
    -ms-flex-item-align: center;
        -ms-grid-row-align: center;
        align-self: center;
    z-index: 2;
}

.project-grid:hover > div:nth-child(2) {
    height: 100%;
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(20, 20, 20, 0.8)), color-stop(rgba(20, 20, 20, 0.7)), color-stop(rgba(20, 20, 20, 0.6)), to(rgba(20, 20, 20, 0)));
    background: -o-linear-gradient(bottom, rgba(20, 20, 20, 0.8), rgba(20, 20, 20, 0.7), rgba(20, 20, 20, 0.6), rgba(20, 20, 20, 0));
    background: linear-gradient(0deg, rgba(20, 20, 20, 0.8), rgba(20, 20, 20, 0.7), rgba(20, 20, 20, 0.6), rgba(20, 20, 20, 0));
}

.project-grid:hover > h3 {
    opacity: 1;   
}

@media (max-width: 320px) {
    .section-1 > div:nth-child(1) {
        width: calc(100vw - 1rem - 1rem);
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        gap: var(--regular);
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: start;
    }
    
    .section-1 > div:nth-child(2) {
        width: calc(100vw - 1rem - 1rem);
    }

    .project-type-container {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        gap: var(--regular);
    }

    .project-category {
        -webkit-box-pack: start;
            -ms-flex-pack: start;
                justify-content: start;
    }

    .project-grid-container {
        grid-template-columns: repeat(1, 1fr);
    }
}

@media (min-width: 320px) {
    .section-1 > div:nth-child(1) {
        width: calc(100vw - 1rem - 1rem);
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        gap: var(--regular);
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: start;
    }
    
    .section-1 > div:nth-child(2) {
        width: calc(100vw - 1rem - 1rem);
    }

    .project-type-container {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        gap: var(--regular);
    }

    .project-category {
        -webkit-box-pack: start;
            -ms-flex-pack: start;
                justify-content: start;
    }

    .project-grid-container {
        grid-template-columns: repeat(1, 1fr);
    }
}

@media (min-width: 480px) {
    .section-1 {
        gap: var(--large);
    }

    .section-1 > div:nth-child(1) {
        gap: var(--medium);
    }

    .project-grid-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 600px) {
    .section-1 > div:nth-child(1) {
        width: calc(100vw - 2rem - 2rem);
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        gap: var(--x-large);
        -webkit-box-align: end;
            -ms-flex-align: end;
                align-items: end;
    }
    
    .section-1 > div:nth-child(2) {
        width: calc(100vw - 2rem - 2rem);
    }

    .project-grid-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .project-category {
        -webkit-box-pack: end;
            -ms-flex-pack: end;
                justify-content: end;
    }
}

@media (min-width: 768px) {
    .project-type-container {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        gap: var(--large);
    }
}

@media (min-width: 800px) {
    .project-grid-container {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1280px) {
    .section-1 > div:nth-child(1) {
        width: calc(100vw - 8.625rem - 8.625rem);
    }
    
    .section-1 > div:nth-child(2) {
        width: calc(100vw - 8.625rem - 8.625rem);
    }

    .project-grid-container {
        grid-template-columns: repeat(3, 1fr);
    }
}