#work {
    background: #111;

    .filters {
        display: flex;
        gap: 20px;
        justify-content: center;
        margin-bottom: 64px;

        @media only screen and (max-width: 980px) {
            display: grid;
            gap: 12px;
            justify-content: start; 
            margin-bottom: 32px;           
        } 
    }

    .list {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 100px 60px;
        align-content: baseline;    

        @media only screen and (max-width: 980px) {
            grid-template-columns: 1fr;
            gap: 64px;
        } 

        .item {
            display: grid;
            gap: 20px;
            align-content: baseline;    
            text-align: center;

            .image {
                position: relative;
                border-radius: 24px;               
                overflow: hidden;                
                background: #1a1a1a;

                img {
                    position: relative;
                    display: block;
                    border-radius: 24px;
                    aspect-ratio: 1;
                    object-fit: cover;
                    width: 100%;
                    overflow: hidden;
                }
                
                margin-bottom: 12px;               
            }

            .heading {
                font-size: 40px;
                line-height: 1.2;
                font-family: var(--font-big);
                text-transform: uppercase;
                color: #fff;
                text-box: cap alphabetic;

                @media only screen and (max-width: 980px) {
                    font-size: 34px;
                } 

            }

            .description {
                font-size: 22px;
            }

            &:hover .heading {
                text-decoration: underline;
            }
        }
    }

    [delayed] {
        .item {
            .image {
                img {
                    opacity: 0;
                }
            }

            .image,
            .heading,
            .description {
                &:after {
                    content: "";
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    transform: translateX(-101%);
                    background: linear-gradient(100deg, transparent 25%, rgba(255, 255, 255, 0.05) 50%, transparent 75%);
                    animation: loadingGrid 1.5s ease infinite;
                }
            }

            .heading,
            .description {
                overflow: hidden;
                margin-inline: auto;
                background: #1a1a1a;
                border-radius: 150px;
                color: transparent;
                position: relative;
            }

            .heading {
                height: 30px;
                width: 50%;
            }

            .description {
                height: 20px;
            }
        }
    }

    .btn-wrap {
        text-align: center;
        margin-top: 32px;
    }
}


@keyframes loadingGrid {
   0% {
      transform: translateX(-101%);
   }
   80% {
      transform: translateX(101%);
   }
   to {
      transform: translateX(101%);
   }
}