.brands-header-background {
    height: 100%;
    background: #384450 url("../../images/brands/bg.jpg") center 43%/cover;
}
.brand-list-wrap {
    position: relative;
    margin-left: -10px;
    background: url("../../images/brands/brand-bg.png") top left no-repeat;
    background-size: cover;
}
.brand-list-wrap::before, .brand-list-wrap::after {
    content: '';
    position: absolute;
    width: 25px;
    height: 25px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 25 25'%3E%3Crect x='5' width='1' height='20' fill='%23BEBEBE'/%3E%3Crect x='5' y='19' width='20' height='1' fill='%23BEBEBE'/%3E%3Crect x='4' y='14' width='3' height='11' fill='%2300ADC7'/%3E%3Crect y='18' width='11' height='3' fill='%2300ADC7'/%3E%3C/svg%3E");
    z-index: 2;
}
.brand-list-wrap::before {
    top: -19px;
    right: -19px;
}
.brand-list-wrap::after {
    bottom: -9px;
    left: -9px;
    transform: rotate(180deg);
}
.brand-list {
    display: flex;
    flex-wrap: wrap;
    margin-top: 55px;
}
.brand-item {
    display: block;
    width: 20%;
    height: 155px;
    font: 400 14px/16px Onest;
    background: #fff;
    border-left: solid 10px #fff;
    border-bottom: solid 10px #fff;
    overflow: hidden;
    box-shadow: inset 0px 0px 0px 1px #BEBEBE;
}
.brand-item-zero {
    display: block;
    flex-grow: 1;
    background: #fff;
}
.brand-img,
.brand-ttl {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    transition: 0.3s;
}
.brand-img {
    text-transform: uppercase;
    color: #BEBEBE;
}
.brand-img img {
    max-width: 80%;
    max-height: 90%;
}
.brand-ttl {
    align-items: flex-start;
    height: 30px;
    color: #737B80;
}
.brand-item:hover {
    background: transparent;
    box-shadow: inset 0px 0px 0px 1px #00ADC7;
}
.brand-item:hover .brand-img {
    height: calc(100% - 30px);
    color: #00ADC7;
}



@media (max-width: 1400px) {
.brand-item {width: 25%;}
}
@media (max-width: 960px) {
.brand-item {width: 33.3%;}
}
@media (max-width: 679.98px) {
.brand-list {margin-top: 45px;}
.brand-item {height: 120px;}
.brand-list-wrap::before, .brand-list-wrap::after {
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Crect x='5' width='1' height='15' fill='%23BEBEBE'/%3E%3Crect x='5' y='14' width='15' height='1' fill='%23BEBEBE'/%3E%3Crect x='4' y='9' width='3' height='11' fill='%2300ADC7'/%3E%3Crect y='13' width='11' height='3' fill='%2300ADC7'/%3E%3C/svg%3E");
}
.brand-list-wrap::before {
    top: -14px;
    right: -14px;
}
.brand-list-wrap::after {
    bottom: -4px;
    left: -4px;
}
}
@media (max-width: 540px) {
.brand-item {width: 50%;}
.brand-ttl {font-size: 10px; height: 20px;}
.brand-item:hover .brand-img {height: calc(100% - 20px);}
.h1-wrap-brand {
    flex-direction: column; 
    align-items: flex-start;
    gap: 20px;
}
}
@media (max-width: 379.98px) {
.brand-list {margin-top: 40px;}
.brand-item {height: 110px;}
}