.header-left {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: white;
  position: relative;
  --padding-vertical: 9.6vw;
}
.header-left::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  display: block;
  background-color: rgba(0, 0, 0, 0.3);
}
@supports (padding: clamp(3rem, 9.6vw, 123px)) {
  .header-left {
    --padding-vertical: clamp(3rem, 9.6vw, 123px);
  }
}
.header-left > * {
  position: relative;
}
.header-left h1 {
  grid-column: 1/span calc(var(--half) + var(--twelfth));
  -webkit-text-fill-color: white;
}
.header-left > p {
  grid-column: 1/span calc(var(--quarter) + var(--eighth));
}
.header-left aside {
  grid-column: span var(--quarter)/calc(var(--twelfth) * -1);
  grid-row: 1/span all;
  align-self: flex-end;
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: flex-end;
}
.header-left aside p {
  text-transform: uppercase;
  font-weight: 900;
  text-align: right;
}
.header-left aside svg, .header-left aside img {
  margin: 2rem 0;
  height: 3rem;
  width: auto;
}
.header-left gradient {
  display: block;
  position: absolute;
  z-index: 0;
  top: -10%;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(var(--dashboard-bg-gradient) 10%, transparent);
}
@media screen and (max-width: 680px) {
  .header-left h1 {
    grid-column: 1/span calc(var(--half) + var(--quarter));
  }
  .header-left p {
    grid-column: 1/span var(--columns);
  }
  .header-left aside {
    grid-column: 1/span var(--columns);
    grid-row: auto;
    align-items: flex-start;
    padding: 2rem 0 1rem;
  }
  .header-left aside p {
    margin: 0;
    text-align: left;
  }
  .header-left aside svg, .header-left aside img {
    margin: 1rem 0;
  }
}