@media only screen and (max-width: 600px) {
    #works {
        background-color: var(--softbg);
        height: 100%;
    }

    #works #sectit {
        color: black;
        width: 70%;
        /* border: red solid; */
    }

    .item {
        overflow: hidden;
    }

    .item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .gridcon {
        margin: 0rem 0rem;
        /* border: green solid; */
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .container {
        /* scale: 0.2; */
        opacity: 0.8;
        /* border: red solid; */
        padding: 0rem 2rem;
        display: grid;
        width: fit-content;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
        gap: 7.5px 7.5px;
        grid-auto-flow: row;
        grid-template-areas:
            "picbt1 picbt1"
            "picbt1 picbt1"
            "picbt5 picbt7"
            "picbt6 picbt7"
            "picbt2 picbt3"
            "picbt2 picbt4"
            "picbt8 picbt8"
            "picbt8 picbt8" ;
    }

    .picbt1 {
        grid-area: picbt1;
        background-color: #740303;
    }

    .picbt2 {
        grid-area: picbt2;
        background-color: #e38686;
    }

    .picbt3 {
        grid-area: picbt3;
        background-color: #7c64e8;
    }

    .picbt4 {
        grid-area: picbt4;
        background-color: #1ed06b;
    }

    .picbt5 {
        grid-area: picbt5;
        background-color: #ebee23;
    }

    .picbt6 {
        grid-area: picbt6;
        background-color: #19a514;
    }

    .picbt7 {
        grid-area: picbt7;
        background-color: #9bc69d;
    }

    .picbt8 {
        grid-area: picbt8;
        background-color: #27acc3;
    }

}