.hero-banner, #poststuff .hero-banner {
  padding: 7vw 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: -5vw 50%; }
  @media (min-width: 768px) {
    .hero-banner, #poststuff .hero-banner {
      background-position: 65% center;
      padding: 6vw; } }
  @media (min-width: 992px) {
    .hero-banner, #poststuff .hero-banner {
      background-position: 55% center; } }
  @media (min-width: 1200px) {
    .hero-banner, #poststuff .hero-banner {
      background-position: center bottom; } }
  .hero-banner__heading, #poststuff .hero-banner__heading {
    color: #fff;
    font-size: clamp(3.5rem, 2.4vw, 7rem);
    font-weight: bold;
    text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); }
  .hero-banner .slider, #poststuff .hero-banner .slider {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 10px;
    padding: 0 10px 40px;
    margin-top: 20px; }
    .hero-banner .slider__slide, #poststuff .hero-banner .slider__slide {
      padding: 0 20px; }
      .hero-banner .slider__slide h2, #poststuff .hero-banner .slider__slide h2 {
        font-weight: bold;
        text-transform: uppercase;
        font-size: 2rem; }
      .hero-banner .slider__slide p, #poststuff .hero-banner .slider__slide p {
        font-size: 1.8rem; }
    .hero-banner .slider .slick-arrow, #poststuff .hero-banner .slider .slick-arrow {
      border-radius: 100px;
      border: 2px solid #005291;
      padding: 13px;
      width: 20px;
      background-size: auto;
      background-repeat: no-repeat;
      background-position: center;
      position: absolute;
      bottom: 15px;
      right: 15px; }
      .hero-banner .slider .slick-arrow.slick-prev, #poststuff .hero-banner .slider .slick-arrow.slick-prev {
        background-image: url("../../images/arrow-left.svg");
        right: 55px; }
      .hero-banner .slider .slick-arrow.slick-next, #poststuff .hero-banner .slider .slick-arrow.slick-next {
        background-image: url("../../images/arrow-right.svg"); }
  .hero-banner .slick-dots, #poststuff .hero-banner .slick-dots {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    justify-content: center; }
    .hero-banner .slick-dots li, #poststuff .hero-banner .slick-dots li {
      list-style: none; }
    .hero-banner .slick-dots button, #poststuff .hero-banner .slick-dots button {
      position: relative;
      overflow: hidden;
      border-radius: 100%;
      background: #fff;
      text-indent: -50px;
      width: 12px;
      height: 12px;
      border: 0;
      padding: 0; }
    .hero-banner .slick-dots .slick-active button, #poststuff .hero-banner .slick-dots .slick-active button {
      background: #0b81db; }