/*!***************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[3]!./template/acf-blocks/hero-banner/style.scss ***!
  \***************************************************************************************************************************************************************************************************************************************/
.hero-banner__inner {
  display: inline-flex;
  width: 100%;
  gap: 20px;
}
@media (max-width: 767px) {
  .hero-banner__inner {
    flex-direction: column-reverse;
    width: 100%;
    background: #F5F3F4;
    border-radius: 16px;
  }
}
.hero-banner__inner .left {
  width: calc(30% + 4px);
  border-radius: 16px;
  padding: 64px 32px;
  display: flex;
  flex-direction: column;
}
@media (max-width: 767px) {
  .hero-banner__inner .left {
    padding-top: 32px;
  }
}
@media (max-width: 767px) {
  .hero-banner__inner .left {
    width: 100%;
  }
}
.hero-banner__inner .left.gray {
  background: #F5F3F4;
}
.hero-banner__inner .left.red {
  background: #BC1F26;
}
.hero-banner__inner .left.red .title h2 {
  color: #FFFFFF;
}
.hero-banner__inner .left.blue {
  background: #0E142C;
}
.hero-banner__inner .left.blue .title h2 {
  color: #FFFFFF;
}
.hero-banner__inner .left .title h2 {
  margin: 0 0 16px;
  font-size: 32px;
  font-weight: 700;
  color: #0E142C;
}
.hero-banner__inner .left .description {
  color: #0E142C;
  text-transform: uppercase;
}
@media (max-width: 767px) {
  .hero-banner__inner .left .description {
    margin-bottom: 32px;
  }
}
.hero-banner__inner .left .buttons {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hero-banner__inner .left .buttons a {
  color: #FFF;
  padding: 10px 12px;
  border-radius: 3px;
  display: inline-flex;
  gap: 10px;
  align-items: center;
  font-size: 15px;
}
.hero-banner__inner .left .buttons a.button--red {
  background: #BC1F26;
}
.hero-banner__inner .left .buttons a.button--blue {
  background: #0E142C;
}
.hero-banner__inner .left .buttons a.button--transparent {
  background: transparent;
  border: 1px solid #FFFFFF;
}
.hero-banner__inner .left .buttons a img {
  width: 25px;
}
.hero-banner__inner .left .logo {
  margin-top: 32px;
}
.hero-banner__inner .right {
  width: calc(70% - 10px);
}
@media (max-width: 767px) {
  .hero-banner__inner .right {
    width: 100%;
    padding-top: 64px;
  }
}
.hero-banner__inner .right .image {
  height: 100%;
}
.hero-banner__inner .right .images-grid {
  display: grid;
  width: 100%;
  gap: 16px;
  height: 100%;
}
.hero-banner__inner .right .images-grid .images-grid__item {
  height: 100%;
}
@media (max-width: 767px) {
  .hero-banner__inner .right .images-grid .images-grid__item {
    display: flex;
    justify-content: center;
  }
}
.hero-banner__inner .right .images-grid--1 {
  grid-template-columns: 1fr;
}
.hero-banner__inner .right .images-grid--1 img {
  border-radius: 16px;
}
.hero-banner__inner .right .images-grid--2, .hero-banner__inner .right .images-grid--3 {
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
}
@media (max-width: 767px) {
  .hero-banner__inner .right .images-grid--2, .hero-banner__inner .right .images-grid--3 {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
  }
}
.hero-banner__inner .right .images-grid--2 img, .hero-banner__inner .right .images-grid--3 img {
  border-radius: 16px;
}
.hero-banner__inner .right .images-grid--2 .images-grid__item:first-child, .hero-banner__inner .right .images-grid--3 .images-grid__item:first-child {
  grid-row: 1/3;
}
@media (max-width: 767px) {
  .hero-banner__inner .right .images-grid--2 .images-grid__item:first-child, .hero-banner__inner .right .images-grid--3 .images-grid__item:first-child {
    grid-row: 1;
  }
}
.hero-banner__inner .right .images-grid__item {
  height: 100%;
}
.hero-banner__inner .right .images-grid__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 16px;
}
@media (max-width: 767px) {
  .hero-banner__inner .right .images-grid__item img {
    width: auto;
    height: auto;
  }
}

@media (max-width: 767px) {
  .single .hero-banner__inner {
    flex-direction: column;
  }
  .single .hero-banner__inner .right {
    padding-top: 0;
  }
  .page-id-16 .hero-banner__inner {
    flex-direction: column;
  }
  .page-id-16 .hero-banner__inner .right {
    padding-top: 0;
  }
}

/*# sourceMappingURL=style.css.map*/