.logos {
    .logo-container {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--anresis-spacing-5) 0;

        @media (max-width: 1023px) {
            justify-content: center;
        }
    }

    .logos-title {
        font: var(--anresis-font-logos-title);
        text-align: center;
        width: 60%;
        margin-inline: auto;
        margin-block-end: var(--anresis-spacing-7);

        @media (max-width: 767px) {
            width: 90%;
        }
    }

    .logo {
        display: block;
        width: 200px;

        >img {
            display: block;
            opacity: 0.6;
            transition: 0.25s opacity;
            max-height: 100%;
            object-fit: contain;
            will-change: opacity;
        }

        &:hover {
            > img {
                opacity: 1;
            }
        }

        @media (max-width: 767px) {
            width: 140px
        }
    }
}