:root {
  --color-white: #ffffff;
  --color-platinum: #f5f5f5;
  --color-light-gray: #d4d4d8;
  --color-gainsboro: #d8d9e0;
  --color-silver-metallic: #adaeb3;
  --color-manatee: #8e929c;
  --color-dark-silver: #545560;
  --color-roman-silver: #82828C;
  --color-raisin-black: #222330;
  --color-persian-blue: #003cc5;
  --color-persian-blue--dark-1: #0036B1;
  --color-persian-blue--light-1: #0042DD;
  --color-persian-blue--light-2: #e9efff;
  --color-maximum-red: #d72222;
  --color-maximum-red--dark-1: #c91f1f;
  --color-maximum-red--light-1: #de2e2e;
  --color-maximum-red--light-2: #fcefef;
  --color-jade: #26A769;
  --color-sunglow: #ffd23f;
  --color-danube: #77a2db;
  --color-gallery: #efefef;
  --color-st-tropaz: #2f5691;
  --color-gray: #808080;
  --color-dove-gray: #6c6c6c;
  --color-yellow-sea: #ffb000;
  --color-web-orange: #eea300;
  --color-linline-black: #0d111c;
  --color-linline-orange: #ff6600;
  --color-linline-orange-hover: #dd5800;
  --color-linline-blue: #15a8f1;
  --color-linline-blue-hover: #16a0e6;
  --color-linline-ghostly-white: #f3f3ff;
  --color-linline-mandarine: #faa38a;
  --color-linline-smoke: #f7f3f0;
  --color-linline-linen: #faf0e6;
  --color-linline-gray: #f6f7f8;
  --color-linline-placeholder: #b4b4b4;
  --color-linline-table-border: #e2e2e2;
  --color-linline-red: #dc3741;
  --color-linline-red-hover: #c5323c;
  --color-linline-light-gray: #f8f8f8;
  --color-linline-light-gray-hover: #f1f1f1;
  --color-linline-dark-gray: #8e8e8e;
  --color-linline-cadet-blue: #bec8d0;
  --color-border: var(--color-manatee);
  --color-disabled: var(--color-platinum);
}

.component__banner {
  margin-bottom: 2rem;
}

.banner {
  position: relative;
  height: 20rem;
}
@media screen and (min-width: 768px) {
  .banner {
    height: 45rem;
  }
}

.banner__image {
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  background-size: initial;
  background-position: 24%;
  background-repeat: no-repeat;
}
@media screen and (min-width: 576px) {
  .banner__image {
    background-position: 16%;
  }
}
@media screen and (min-width: 768px) {
  .banner__image {
    background-size: cover;
    background-position: top;
  }
}

.banner__text-block {
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: var(--color-white);
  padding: 1rem 0;
}
@media screen and (min-width: 768px) {
  .banner__text-block {
    align-items: start;
    width: 40%;
  }
}
@media screen and (min-width: 992px) {
  .banner__text-block {
    padding-left: 2rem;
  }
}
@media screen and (min-width: 1400px) {
  .banner__text-block {
    padding-left: 14rem;
  }
}
@media screen and (min-width: 1650px) {
  .banner__text-block {
    padding-left: 7rem;
    width: 36%;
  }
}
@media screen and (min-width: 1800px) {
  .banner__text-block {
    padding-left: 4rem;
    padding-top: 10rem;
  }
}
@media screen and (min-width: 2200px) {
  .banner__text-block {
    padding-left: 0;
    padding-top: 20rem;
  }
}

.banner__title {
  font-size: 2rem;
  line-height: 2rem;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.banner__subtitle {
  font-size: 1.6rem;
  line-height: 2rem;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
@media screen and (min-width: 768px) {
  .banner__subtitle {
    font-size: 2rem;
  }
}

.banner__btn .component-button {
  margin: 1rem 0;
}
/*# sourceMappingURL=map/banner.css.map */