.Customers {
    & .customer-list {
        display: flex;
        flex-wrap: wrap;

        & img {
            height: 50px;

            &.white {
                filter: brightness(0) invert(1);
            }
        }
    }

    & .projects-list {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;


        & > article {
            flex-grow: 1;
            flex-shrink: 0;
            flex-basis: clamp(350px, calc(33% - 3rem), 400px);
            height: 350px;
            display: grid;
            overflow: hidden;

            & .skill {
                height: 30px;
            }

            & .bg {
                padding: 0;
                height: 350px;
                width: 100%;

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

            & > * {
                grid-column: 1;
                grid-row: 1;
            }

            & > div {
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: rgba(0, 0, 0, 0.7);
                backdrop-filter: blur(1px);
                transition: var(--transition-time);
                height: 100%;

                text-shadow: 0 0 5px rgba(0, 0, 0, .7);
                text-align: center;
                padding: 1rem;

                & > main {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    gap: 1rem;

                    max-height: 6rem;
                    overflow: hidden;
                    transition: var(--transition-time);

                    & .customer {
                        font-size: 1rem;
                        color: var(--color-white-transparent);
                    }

                    & .title {
                        margin-top: -1rem;
                    }

                    & ul {
                        display: flex;
                        gap: 1rem;
                        justify-content: center;
                        list-style: none;
                    }

                    & a {
                        color: var(--color-orange);

                        &:hover {
                            color: var(--color-white);
                        }
                    }
                }

                &:hover {
                    backdrop-filter: blur(5px);

                    & > main {
                        max-height: 25rem;
                    }
                }
            }
        }
    }
}

@media (width <= 780px) {
    .Customers {
        & .customer-list {
            align-items: center;
            justify-content: center;
        }
    }
}