.top-brands-section {
 padding: 80px 0 0;
 padding-top: 200px;
 background-color: #fbfbfb;
}

.top-brands-section__container {
 max-width: 1200px;
 margin: 0 auto;
 padding: 0 20px;
 box-sizing: border-box;
}

.top-brands-section__header h2 {
 margin: 0 0 120px;
 font-size: var(--font-size-h2);
 line-height: var(--line-height-heading);
 font-weight: 700;
 color: #232323;
 text-align: center;
}

.brand-block {
 display: flex;
 width: 100%;
 background-color: #0099cc;
}

.brand-block--reverse {
 flex-direction: row-reverse;
}

.brand-block__media,
.brand-block__content {
 width: 50%;
 aspect-ratio: 1 / 1;
 flex: 0 0 50%;
}

.brand-block__media {
 overflow: hidden;
}

.brand-block__media img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 display: block;
}

.brand-block__content {
 background-color: #fbfbfb;
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 2rem;
 box-sizing: border-box;
}

.brand-block__inner {
 width: 100%;
 max-width: 520px;
 text-align: center;
}

.brand-block__logo {
 max-width: 180px;
 height: auto;
 display: block;
 margin: 0 auto 24px;
}

.brand-block__inner p {
 margin: 0;
 font-size: var(--font-size-body);
 line-height: var(--line-height-body);
 color: #4a4a49;
}

/* früher umspringen, bevor es gequetscht wirkt */
@media (max-width: 900px) {
 .top-brands-section {
   padding-top: 60px;
 }

 .top-brands-section__container {
   padding: 0 16px;
 }

 .brand-block,
 .brand-block--reverse {
   flex-direction: column;
 }

 .brand-block__media,
 .brand-block__content {
   width: 100%;
   flex: 0 0 auto;
   aspect-ratio: 1 / 1;
 }

 .brand-block__content {
   padding: 2rem 1.5rem;
 }

 .brand-block__logo {
   max-width: 150px;
 }
}