.brand {
  gap: 0;
  font: inherit;
  letter-spacing: normal;
}

.brand-logo-frame {
  display: inline-block;
  position: relative;
  width: 150px;
  height: 40px;
  overflow: hidden;
  flex: none;
}

.brand-logo-frame img {
  position: absolute;
  width: 401px;
  max-width: none;
  height: auto;
  left: -131px;
  top: -114px;
}

.brand-inverse img {
  filter: invert(1);
}

.wordmark-logo {
  vertical-align: middle;
}

.project-art {
  flex-direction: row;
  gap: 46px;
}

.vertical-logo-frame {
  position: relative;
  display: block;
  width: 70px;
  height: 220px;
  overflow: hidden;
}

.vertical-logo-frame img {
  position: absolute;
  width: 203px;
  max-width: none;
  height: auto;
  left: -92px;
  top: -44px;
}

.symbol-logo-frame {
  position: relative;
  display: block;
  width: 84px;
  height: 100px;
  overflow: hidden;
}

.symbol-logo-frame img {
  position: absolute;
  width: 120px;
  max-width: none;
  height: auto;
  left: -35px;
  top: 0;
}

@media (max-width: 700px) {
  .header .brand {
    font-size: inherit;
  }

  .brand-logo-frame {
    width: 130px;
    height: 35px;
  }

  .brand-logo-frame img {
    width: 348px;
    left: -113px;
    top: -99px;
  }

  .statement .wordmark-logo {
    display: block;
    margin-top: 18px;
  }

  .project-art {
    flex-direction: row;
    gap: 34px;
  }

  .vertical-logo-frame {
    height: 190px;
  }

  .vertical-logo-frame img {
    width: 176px;
    left: -80px;
    top: -38px;
  }

  .symbol-logo-frame {
    width: 72px;
    height: 86px;
  }

  .symbol-logo-frame img {
    width: 103px;
    left: -30px;
  }
}