.block-banner .bg {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  position: relative;
  padding-bottom: 50%;
}

.block-banner .bg::before {
  display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  content: ''; background: rgba(23,41,67,0.75);
}

.block-banner .content-wrapper { position: absolute; top: 0; bottom: 0; left: 0; right: 0; color: #fff; overflow: hidden; }
.block-banner .content-wrapper::before { display: inline-block; height: 100%; width: 0; content: ""; vertical-align: middle; }
.block-banner .info { width: calc(100% - 4px); display: inline-block; vertical-align: middle; }

.block-banner h3 { margin: 0; font-weight: 200; font-size: 30px; line-height: 38px; clear: both; text-align: center; }
.block-banner .msg { font-size: 18px; font-weight: 300; line-height: 24px; margin: 0; text-align: center; }
.block-banner .readmore { text-align: center; margin-top: 10px; }

@media (min-width: 670px) {
  .block-banner .bg {
    padding-bottom: 25%;
  }
}
@media (min-width: 768px) {
  .block-banner h3 { font-size: 44px; line-height: 52px; }
  .block-banner .msg { font-size: 24px; line-height: 30px; }
}

@media (min-width: 1200px) {
  .block-banner h3 { font-size: 52px; line-height: 60px; }
  .block-banner .msg { font-size: 30px; line-height: 36px; }
}

@media (min-width: 1500px) {
  .block-banner .bg { padding-bottom: 375px; }
}