.all-projects {
    padding-block:5rem;
}

.search {
    padding:2rem 5vw;
    clear:both;
    background-color:var(--green);
    color:#fff;

    & .searchbox {
        position: relative;
        display:grid;
        grid-template-columns: 1fr 110px;
    
        & input {
            padding: 1.25rem;
            border: none;
            border-radius:1rem 0 0 1rem;
            outline: none;
            font-size: 1rem;
            margin: 0;
            color: #212121;
        }

        & ::placeholder {
            font-size:1.4rem;
        }
    
        & button {
            padding:0.75rem;
            & img {
                width:30px;
            }
        }

        & a.clear {
            display:grid;
            position:absolute;
            place-content: center;
            background-color:#ddd;
            color:#212121;
            font-size:2rem;
            text-decoration: none;
            right:110px;
            top:0;
            height:100%;
            width:100px;
        }

        &:has(input:placeholder-shown) a.clear {
            display:none;
        }
    }
}

.result-head {
    background-color:#f5f5f5;
    padding:2.5rem 5vw;
    text-align: center;

    & h2 {
        margin:0;

        & span {
            color:var(--green);
        }
    }
}



.proj:nth-of-type(5n){
    grid-column: 1/-1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap:0;
    margin-bottom:1rem;
    & .text {
        display:flex;
        gap:0;
        flex-wrap:wrap;
        justify-content: center;
        align-content: center;
        align-items: center;
        padding:var(--global_padding);
        text-align: center;
        width:100%;
        height:100%;
        background-color:var(--green);
        color:#fff;
    }

    & .green-outline-btn {
        border:1px solid #fff;
        color:#fff;

        &:hover {
            border-color: var(--yellow);
            color:var(--green);
        }
    }

    @media screen and (max-width:900px){
        grid-template-columns: 1fr;
    }
}


.project-title {
    & .textarea {
        width:100%;
        text-align: center;
    }
}

article {
    clear:both;
    padding-block:5rem;
    margin-inline:auto;
    text-align: center;

    & :is(p,h2,h3,h4,h5,h6) img {
        width:100%;
        margin-bottom:2rem;
    }
}

.splide {
    padding-top:0;
}

.product-highlights{
    padding-block:5rem;
    background-color:var(--pale_green);

    & h2 {
        color:var(--green);
    }
}