banners.css

TLDR

This file, banners.css, contains CSS styles for the banners on the website.

Classes

.mmtrust-banner

This class is used to style the banners. It sets the margin-top to 80px and centers the text.

.mmtrust-banner .title

This class is used to style the title within the banners. It sets the font size to 14px, font weight to bold, and opacity to 0.6.

.mmtrust_banner__logos

This class is used to style the logos within the banners. It displays the logos in a flex layout, wraps them, and centers them. It also sets the margin-top to 40px and specifies a gap of 120px between the logos.

.mmtrust-banner.mentioned-in

This class is used to style the banners that are mentioned in. It sets the margin-top to 140px.

.mmtrust-banner.mentioned-in img

This class is used to style the images within the banners that are mentioned in. It sets the opacity to 1 and removes the grayscale filter.

.mmtrust_banner__logos img

This class is used to style the images within the logos of the banners. It sets a transition of 0.25s for all properties, sets the initial opacity to 0.4, and applies a grayscale filter.

.mmtrust_banner__logos img:hover

This class is used to style the images within the logos of the banners when they are hovered over. It sets the opacity to 1 and removes the grayscale filter.

END

.mmtrust-banner {
    margin-top: 80px;
    text-align: center;
}

.mmtrust-banner .title {
    font-size: 14px;
    font-weight: bold;
    opacity: .6;
}

.mmtrust_banner__logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 40px;
    gap: 120px;
}

.mmtrust-banner.mentioned-in {
    margin-top: 140px;
}

.mmtrust-banner.mentioned-in img {
    opacity: 1;
    filter: none;
    -webkit-filter: grayscale(0%);
    -moz-filter:    grayscale(0%);
    -ms-filter:     grayscale(0%);
    -o-filter:      grayscale(0%);;
}

.mmtrust_banner__logos img {
    transition: all ease 0.25s;
    opacity: 0.4;
    filter: none;
    -webkit-filter: grayscale(100%);
    -moz-filter:    grayscale(100%);
    -ms-filter:     grayscale(100%);
    -o-filter:      grayscale(100%);;
}

.mmtrust_banner__logos img:hover {
    opacity: 1;
    filter: none;
    -webkit-filter: grayscale(0%);
    -moz-filter:    grayscale(0%);
    -ms-filter:     grayscale(0%);
    -o-filter:      grayscale(0%);
}

@media (max-width: 992px) {
    .mmtrust_banner__logos {
        gap: 40px;
    }
}