.brands {
    @apply mb-16;

    .uhasselt-container {
        @apply grid gap-8;

        @screen md {
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        }

        @screen lg {
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
        }
    }

    .wrapper {
        .brand {
            @apply flex flex-col content-center border border-solid border-gray items-center bg-white;

            .picture {
                @apply m-4;
                height: 150px;

                .picture-image {
                    max-width: 160px;
                    position: relative;
                    top: 50%;
                    transform: translateY(-50%);
                }
            }

            .paragraph {
                @apply w-full p-4 border-t border-solid border-gray text-center;
            }
        }

        .partners {
            h2 {
                @apply block mb-4;
            }

            p {
                @apply block mb-5;
            }
        }
    }
}