.SolidCategories {

    .solid-grid-container {
        display: grid;
        grid-template-columns: repeat(30, 1fr);
        grid-template-rows: repeat(10, 1fr);
        gap: 10px;
        height: 600px;

        .solid-grid-item {
            background-color: #008080;
            position: relative;
            overflow: hidden;

            img{
                transition: 700ms;
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                object-fit: cover;
                width: 100%;
                height: 100%;
            }

            h2{
                transition: 700ms;
                position: absolute;
                right: 0;
                left: 0;
                bottom: 0;
                padding: 1rem;
                margin: 0;
                background: transparent;
                padding-top: 4rem;
            }

            &:nth-child(1){
                grid-column: 1 / 11;
                grid-row: 1 / 11;
            }
            &:nth-child(2){
                grid-column: 11 / 21;
                grid-row: 1 / 6;
            }
            &:nth-child(3){
                grid-column: 11 / 21;
                grid-row: 6 / 11;
            }
            &:nth-child(4){
                grid-column: 21 / 31;
                grid-row: 1 / 11;
            }

            &:hover{
                img{
                    filter: grayscale(.7);
                }
                h2{
                    background: linear-gradient(0deg,rgba(255, 255, 255, 1) 10%, rgba(255, 255, 255, 0) 100%);
                }
            }


        }
    }

}
