.all-brands-wrap {
    margin-top: 50px;
}

.all-brands {
    .all-brands-inner {
        display: flex;
        flex-wrap: wrap;
        margin: 0 -10px -20px;

        .col-9 {
            padding: 0 10px;
        }
    }

    .brand-image {
        position: relative;
        display: block;
        margin-bottom: 20px;
        padding-bottom: 70%;
        border: 1px solid var(--color-gray-lite);
        border-radius: var(--radius-default);
        overflow: hidden;
        transition: var(--transition-150);

        &:hover {
            border-color: var(--color-primary);

            > img {
                transform: translate(-50%, -50%) scale(1.1);
            }
        }

        > img {
            position: absolute;
            left: 50%;
            top: 50%;
            max-height: 100%;
            max-width: 100%;
            transform: translate(-50%, -50%) scale(1);
            transition: var(--transition-150);
        }

        .image-placeholder {
            height: 65px;
            width: 65px;
        }
    }

    .empty-message {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        text-align: center;
        padding: 40px 0;

        svg {
            height: 100px;
            width: 100px;
            margin-bottom: 22px;

            path {
                stroke: var(--color-white);
                stroke-miterlimit: 10;
                stroke-width: 5px;

                fill: var(--color-primary);
            }
        }
    }
}