.banner-frame { display: flex; justify-content: space-between; flex-wrap: wrap; margin-bottom: 30px; margin-top: 30px; position: relative; z-index: 1; }

@media all and (min-width: 1367px) {  .banner-frame { margin-left: 80px; margin-right: 80px; } }
@media all and (min-width: 1281px) and (max-width: 1366px) { .banner-frame { margin-left: 70px; margin-right: 70px; } }
@media all and (min-width: 1025px) and (max-width: 1280px) { .banner-frame { margin: 25px 60px; } }
@media all and (min-width: 321px) and (max-width: 1024px) { .banner-frame { margin: 25px 30px 0; } }
@media all and (max-width: 320px) { .banner-frame { margin: 10px 20px 0; } }


.banner { display: block; position: relative; }
.banner-big { flex: 1 0 100% }

.banner img { display: block; height: auto; object-fit: cover; position: relative; width: 100%; }

.banner video { display: block; max-width: 100%; }
.banner-content { display: block; z-index: 1; }
.banner.banner-small { margin-bottom: 50px }
.banner.banner-small .bc-title { font-size: 30px }
.banner:not(.banner-small) .banner-content{  color: white; position: absolute; }

.banner .overlay { position: absolute; top: 0; left: 0; background: rgba(0, 0, 0, 0.3); width: 100%; height: 100%; }

.bc-title, .bc-text { margin-bottom: 20px; }
.bc-text { font-family: 'neue-haas-unica', 'Arial Narrow', Arial, Helvetica, sans-serif; font-weight: 300; line-height: 172.49%; letter-spacing: 0.06em; }

.bc-middle { top: 0; bottom: 0; margin: auto; display: flex; justify-content: center; flex-direction: column; }
.bc-center { left: 0; right: 0;  margin: auto; text-align: center; }
.bc-right { text-align: right; }

@media all and (max-width: 320px) {
    .banner.banner-big, .banner.banner-medium { margin-bottom: 10px; }
    .banner.banner-small img { margin-bottom: 10px; }
}

@media all and (min-width: 321px) and (max-width: 768px) {
    .banner.banner-big, .banner.banner-medium { margin-bottom: 30px; }
    .banner.banner-small img { margin-bottom: 30px; }
}

@media all and (max-width: 580px) {
    .banner:not(.banner-small) .banner-content{ max-width: 90%; }
    .bc-top { top: 25px }
    .bc-bottom { bottom: 25px }
    .bc-left { left: 25px; padding-right: 25px }
    .bc-right { right: 25px; padding-left: 25px }
}

@media all and (max-width: 768px) {
    .banner-medium, .banner-small { width: 100% }
    .banner.banner-medium img,
    .banner.banner-big img,
    .banner.banner-big video {  min-height: 60vh; object-fit: cover; object-position: center; }
}

@media all and (min-width: 769px) {
    .banner-medium { width: 49% }
    .banner-small { width: 32% }
}

@media all and (min-width: 769px) and (max-width: 1440px) {
    .banner.banner-small img { margin-bottom: 40px }
}

@media all and (max-width: 768px) and (min-width: 581px) {
    .banner:not(.banner-small) .banner-content{ max-width: 40%; }
}

@media all and (max-width: 1440px) and (min-width: 581px) {
    .bc-top { top: 55px }
    .bc-bottom { bottom: 55px }
    .bc-left { left: 55px }
    .bc-right { right: 55px }
}

@media all and (min-width: 1441px) {
    .banner.banner-small img { margin-bottom: 50px }
    .banner-medium { width: 49% }
    .banner-small { width: 32% }
    .bc-top { top: 80px }
    .bc-bottom { bottom: 80px }
    .bc-left { left: 75px }
    .bc-right { right: 75px }
}

@media all and (min-width: 769px) and (max-width: 1661px) {
    .banner.banner-medium .banner-content{ max-width: 50%; }
    .banner.banner-big .banner-content{ max-width: 35%; }
}

@media all and (min-width: 1660px) {
    .banner.banner-medium .banner-content{ max-width: 35%; }
    .banner.banner-big .banner-content{ max-width: 25%; }
}

@media all and (min-width: 1281px) { h2 { font-size: 50px; } }
@media all and (max-width: 1280px) { h2 { font-size: 35px; } }