:root {
  --lsa-bordeaux: #872828;
  --lsa-white: #ffffff;
  --lsa-black: #000000;
  --lsa-soft-white: rgba(255, 255, 255, 0.86);
}

.lsa-banner {
  width: 100%;
  min-height: clamp(360px, 50vw, 520px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  background: var(--lsa-bordeaux);
  box-sizing: border-box;
}

.lsa-banner *,
.lsa-banner *::before,
.lsa-banner *::after {
  box-sizing: border-box;
}

.lsa-banner__top {
  height: clamp(72px, 8vw, 88px);
  background: var(--lsa-white);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 clamp(14px, 2.6vw, 24px);
  position: relative;
  z-index: 2;
}

.lsa-banner__logo {
  display: block;
  width: clamp(210px, 28vw, 300px);
  height: auto;
  position: relative;
  z-index: 5;
}

.lsa-banner__body {
  position: relative;
  flex: 1;
  overflow: visible;
  background: var(--lsa-bordeaux);
}

.lsa-banner__body::after {
  content: "";
  position: absolute;
  left: 54.5%;
  top: 50%;
  width: 1px;
  height: 66%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.86);
  z-index: 4;
}

.lsa-banner__number-wrap {
  position: absolute;
  left: clamp(-86px, -4.6vw, -28px);
  top: clamp(-90px, -8vw, -58px);
  bottom: auto;
  line-height: 0.76;
  z-index: 3;
}

.lsa-banner__number {
  display: block;
  margin: 0;
  color: var(--lsa-black);
  font-family: "Times New Roman", Times, serif;
  font-weight: 700;
  font-size: clamp(22rem, 56vw, 48rem);
  line-height: 0.76;
  letter-spacing: -0.075em;
}

.lsa-banner__eme {
  position: absolute;
  top: clamp(34px, 5.4vw, 68px);
  left: clamp(255px, 31vw, 455px);
  color: var(--lsa-bordeaux);
  font-family: "Times New Roman", Times, serif;
  font-weight: 700;
  font-size: clamp(2.1rem, 4.8vw, 4.4rem);
  line-height: 1;
  z-index: 4;
}

.lsa-banner__content {
  position: absolute;
  right: clamp(16px, 4vw, 42px);
  top: 50%;
  transform: translateY(-42%);
  width: min(40%, 365px);
  z-index: 4;
  text-align: left;
}

.lsa-banner__subtitle {
  margin: 0 0 clamp(10px, 1.5vw, 16px);
  color: var(--lsa-soft-white);
  font-family: "Avant Garde", "ITC Avant Garde Gothic", "Century Gothic", Montserrat, Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(1.8rem, 4.6vw, 4rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
}

.lsa-banner__title {
  margin: 0;
  color: var(--lsa-white);
  font-family: "Times New Roman", Times, serif;
  font-weight: 700;
  font-size: clamp(5rem, 11vw, 8.8rem);
  line-height: 0.82;
  letter-spacing: -0.04em;
}

@media (max-width: 900px) {
  .lsa-banner__body::after {
    left: 55%;
    height: 62%;
  }

  .lsa-banner {
    min-height: clamp(320px, 54vw, 430px);
  }

  .lsa-banner__content {
    width: min(43%, 310px);
    right: 16px;
  }

  .lsa-banner__number-wrap {
    left: -52px;
    top: -72px;
    bottom: auto;
  }

  .lsa-banner__eme {
    left: clamp(208px, 30.5vw, 330px);
    top: 44px;
  }
}

@media (max-width: 680px) {
  .lsa-banner__body::after {
    display: none;
  }

  .lsa-banner {
    min-height: 340px;
  }

  .lsa-banner__top {
    height: 66px;
    padding: 0 12px;
  }

  .lsa-banner__logo {
    width: clamp(175px, 52vw, 240px);
  }

  .lsa-banner__body {
    min-height: 274px;
  }

  .lsa-banner__number-wrap {
    left: -34px;
    top: -42px;
    bottom: auto;
  }

  .lsa-banner__number {
    font-size: clamp(14rem, 64vw, 21rem);
  }

  .lsa-banner__eme {
    top: 28px;
    left: clamp(144px, 35vw, 205px);
    font-size: clamp(1.5rem, 5vw, 2.4rem);
  }

  .lsa-banner__content {
    right: 12px;
    width: 46%;
    transform: translateY(-38%);
  }

  .lsa-banner__subtitle {
    font-size: clamp(1.15rem, 5vw, 2rem);
    line-height: 0.98;
  }

  .lsa-banner__title {
    font-size: clamp(3.3rem, 13.5vw, 5.4rem);
    line-height: 0.84;
  }
}

@media (max-width: 420px) {
  .lsa-banner {
    min-height: 315px;
  }

  .lsa-banner__top {
    height: 62px;
  }

  .lsa-banner__logo {
    width: 165px;
  }

  .lsa-banner__body {
    min-height: 253px;
  }

  .lsa-banner__number-wrap {
    left: -28px;
    top: -34px;
    bottom: auto;
  }

  .lsa-banner__number {
    font-size: 13rem;
  }

  .lsa-banner__eme {
    top: 24px;
    left: 132px;
    font-size: 1.35rem;
  }

  .lsa-banner__content {
    width: 47%;
    right: 10px;
    transform: translateY(-36%);
  }

  .lsa-banner__subtitle {
    font-size: 1rem;
  }

  .lsa-banner__title {
    font-size: 3rem;
  }
}