@import url("https://fonts.googleapis.com/css2?family=Prompt:wght@400;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;900&display=swap");
.box-shadow {
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
}

.brand-2024.header {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 385px;
  overflow: hidden;
  color: #fff;
  background: #272727;
}
.brand-2024.header .header-wrap,
.brand-2024.header .content {
  display: grid;
}
.brand-2024.header .header-wrap {
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(2, min-content);
  width: 100%;
  max-width: 1100px;
  box-sizing: border-box;
}
@media screen and (min-width: 992px) {
  .brand-2024.header .header-wrap {
    grid-template-rows: repeat(1, min-content);
  }
}
.brand-2024.header .content {
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(4, min-content);
  grid-column: 1/-1;
  padding: 0 15px;
  margin: clamp(1.5rem, -0.9rem + 12vw, 6rem) 0;
  margin-right: clamp(0px, -667.155px + 102.639vw, 350px);
  z-index: 10;
}
@media screen and (min-width: 992px) {
  .brand-2024.header .content {
    grid-column: 1/span 7;
    margin: 6rem 0;
  }
}
.brand-2024.header .content > * {
  align-self: start;
}
.brand-2024.header .content p {
  line-height: 1.4;
}
.brand-2024.header .content h1,
.brand-2024.header .content h2 {
  grid-column: 1/-1;
  text-wrap: pretty;
}
.brand-2024.header .content h1 {
  font-family: "Prompt", sans-serif;
  font-size: clamp(1.8rem, 1.458rem + 1.519vw, 2.4rem);
  font-weight: 700;
  margin-bottom: 0.8rem;
}
.brand-2024.header .content h1:has(+ h2) {
  margin-bottom: 0.8rem;
}
.brand-2024.header .content h2 {
  font-size: 1.4rem;
  margin-bottom: 0.8rem;
}
.brand-2024.header .content p {
  grid-column: 1/-1;
}
.brand-2024.header .content p:has(+ p) {
  margin-bottom: 1em;
}
@media screen and (min-width: 992px) {
  .brand-2024.header .content p {
    grid-column: 1/11;
  }
}
.brand-2024.header .content ul {
  grid-column: 1/-1;
}
.brand-2024.header .content:has(ul.links) + .image {
  margin-top: -5rem;
}
@media screen and (min-width: 992px) {
  .brand-2024.header .content:has(ul.links) + .image {
    margin-top: 0;
  }
}
.brand-2024.header .image {
  position: relative;
  grid-column: 1/-1;
  margin-top: -2.5rem;
  z-index: 5;
}
@media screen and (min-width: 992px) {
  .brand-2024.header .image {
    grid-column: 8/span 5;
    margin-top: 0;
  }
}
.brand-2024.header .image > div {
  display: block;
  height: 75vw;
  width: 100%;
  background-size: cover;
  background-position: 50% 50%;
  box-shadow: inset 0 0 0 1px #272727;
}
@media screen and (max-width: 991px) {
  .brand-2024.header .image > div::after {
    content: "";
    display: block;
    height: 70%;
    width: 100%;
    top: 0;
    left: 0;
    background-image: radial-gradient(circle farthest-side at 50% 75%, transparent 50%, rgba(39, 39, 39, 0.5), rgba(39, 39, 39, 0.9));
    background-size: 100% 100%;
    background-repeat: no-repeat;
    mask-image: linear-gradient(to bottom, #fff, rgba(255, 255, 255, 0));
  }
}
@media screen and (min-width: 992px) {
  .brand-2024.header .image > div {
    position: absolute;
    top: 50%;
    left: -20%;
    height: initial;
    padding-bottom: 160%;
    transform: translateY(-50%);
    width: clamp(730px, -1249.231px + 199.519vw, 1145px);
    backface-visibility: hidden;
    -webkit-backface-visiblity: hidden;
    margin-left: clamp(-100px, 476.923px - 48.077vw, 0px);
  }
}
.brand-2024.header ul.links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8em;
}
.brand-2024.header ul.links,
.brand-2024.header ul.links li {
  list-style: none;
  padding: 0;
}