.top-agency-brands {
    padding-bottom: 164px;
}

.top-agency-brands__title {
    align-items: center;
    margin-bottom: 56px;
}

.top-agency-brands__title div {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0 32px;
    margin-bottom: 24px;
}

.top-agency-brands__title div::before,
.top-agency-brands__title div::after {
    content: "";
    flex-grow: 1;
    height: 1px;
    background: #deddd5;
    border-bottom: 1px solid #fff;
}

.top-agency-brands__title div span {
    width: 132px;
    height: 31px;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: contain;
    mix-blend-mode: color-burn;
    background-image: url(../images/top/agency-brands.svg);
}

.top-agency-brands__title::after {
    display: none;
}

.top-agency-brands__title span {
    font-size: 17px;
    letter-spacing: .08em;
}

.top-agency-brands__title span::before {
    display: none;
}

.agency-brands__list {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}

.agency-brands__list li {
    width: calc(25% - (40px * 3 / 4));
}

.agency-brands__list__thumb {
    aspect-ratio: 330/220;
    overflow: hidden;
    margin-bottom: 32px;
    position: relative;
}

.agency-brands__list__thumb::after {
    display: block;
    content: "";
    width: 40px;
    height: 40px;
    background-color: #3f6ebd;
    background-image: url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.28018 11.5412L0.781605 10.0426L8.30291 2.5142H2.59268L2.60689 0.454545H11.8612V9.71591H9.78729L9.80149 4.01278L2.28018 11.5412Z" fill="white"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    transition: .7s cubic-bezier(0.4, 0.4, 0, 1);
    position: absolute;
    top: 0;
    right: 0;
}

.agency-brands__list li a:hover .agency-brands__list__thumb::after {
    background-color: #fff;
    background-image: url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.28018 11.5412L0.781605 10.0426L8.30291 2.5142H2.59268L2.60689 0.454545H11.8612V9.71591H9.78729L9.80149 4.01278L2.28018 11.5412Z" fill="%233F6EBD"/></svg>');
}

.agency-brands__list__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s cubic-bezier(0.4, 0.4, 0, 1);
}

.agency-brands__list li a:hover {
    opacity: 1;
}

.agency-brands__list li a:hover .agency-brands__list__thumb img {
    transform: scale(1.05);
}

.agency-brands__list__logo {
    display: flex;
    justify-content: center;
}

@media screen and (max-width: 950px) {
    .agency-brands__list__logo img {
        max-width: unset;
        transform: scale(.7);
    }
}

@media screen and (max-width: 768px) {
    .agency-brands__list__logo img {
        transform: scale(.5);
    }
}

@media screen and (max-width: 650px) {
    .top-agency-brands {
        padding-bottom: 80px;
    }

    .top-agency-brands__title {
        margin-bottom: 40px;
    }

    .top-agency-brands__title div {
        margin-bottom: 8px;
    }

    .top-agency-brands__title div span {
        width: 80px;
        height: 19px;
    }

    .top-agency-brands__title span {
        font-size: 15px;
    }

    .agency-brands__list {
        gap: 44px 0;
        margin: 0 -3.0769230769vw;
    }

    .agency-brands__list li {
        width: 50%;
    }

    .agency-brands__list__thumb {
        margin-bottom: 24px;
    }

    .agency-brands__list__thumb::after {
        width: 32px;
        height: 32px;
        background-size: 10px auto;
    }

    .agency-brands__list__logo img {
        transform: scale(.75);
    }
}