.ul-banner {
    --col-gap: 2rem;
    --barH: 1rem;
    --roleH: 2rem;
    --flapH: 2rem;
    width: min(60rem, 90%);
    margin-inline: auto;
    display: flex;
    flex-wrap: wrap;
    gap: var(--col-gap);
    padding-inline: calc(var(--col-gap) / 2);
    justify-content: center;
    align-items: flex-start;
    list-style: none;
    margin-top: 50px;
    margin-bottom: 50px
}

    .ul-banner .li-banner {
        --accent-color: var(--mavi);
        width: 10em;
        display: grid;
        grid-template:
            "role"
            "icon"
            "title"
            "descr";
        align-items: flex-start;
        gap: 1rem;
        padding-block-end: calc(var(--flapH) + 1rem);
        text-align: center;
        background: var(--accent-color);
        background-image: linear-gradient( rgba(0, 0, 0, 0.6) var(--roleH), rgba(0, 0, 0, 0.4) calc(var(--roleH) + 0.5rem), rgba(0, 0, 0, 0) calc(var(--roleH) + 0.5rem + 5rem) );
        clip-path: polygon( calc(var(--col-gap) / -2 - 5px) 0, calc(100% + var(--col-gap) / 2 + 5px) 0, calc(100% + var(--col-gap) / 2 + 5px ) calc(100% - var(--flapH)), 50% 100%, calc(var(--col-gap) / -2 - 5px) calc(100% - var(--flapH)) );
    }

        /* bar */
        .ul-banner .li-banner::before {
            content: "";
            grid-area: role;
            height: var(--barH);
            width: calc(100% + var(--col-gap));
            margin-left: calc(var(--col-gap) / -2);
            margin-top: calc(var(--roleH) / 2 - var(--barH) / 2);
            background: grey;
            z-index: -1;
            background-image: linear-gradient( rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0.1) 40%, rgba(0, 0, 0, 0.1) 60%, rgba(0, 0, 0, 0.2) 70%, rgba(0, 0, 0, 0.4) );
        }

        /* role */
        .ul-banner .li-banner::after {
            content: "";
            grid-area: role;
            background: var(--accent-color);
            background-image: linear-gradient( rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0.1) 40%, rgba(0, 0, 0, 0.1) 60%, rgba(0, 0, 0, 0.2) 70%, rgba(0, 0, 0, 0.4) );
            height: var(--roleH);
        }

        .ul-banner .li-banner .icon-banner,
        .ul-banner .li-banner .title-banner {
            padding-inline: 1rem;
            color: white;
            text-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.5);
        }

        .ul-banner .li-banner .icon-banner {
            font-size: 3rem;
            width: 128px; /* Sabit genişlik */
            height: 128px; /* Sabit yükseklik */
            overflow: hidden; /* Resmin dışarı taşmaması için */
            position: relative;
            background-position: center;
            display: flex;
            justify-content: center; /* Yatayda ortalama */
            align-items: center; /* Dikeyde ortalama */
        }

            .ul-banner .li-banner .icon-banner .partner-img {
                max-width: 100%; /* Resmin genişliği 100% olsun */
                max-height: 100%; /* Resmin yüksekliği 100% olsun */
                object-fit: contain; /* Resmi bozmadan çerçeveye sığdır */
                border-radius:25px;
            }

        .ul-banner .li-banner .title-banner {
            font-size: 1.25rem;
            font-weight: 700;
        }