lqqks.css

@import "./reset.css";
@import "./static/assets/stanley.css";
@import "./styles/_customProperties.css";
@import "./styles/typography.css";
@import "./styles/layout.css";

body {
  background-color: var(--C_accentPrimary);
}

.heroIntro-wrapper {
  grid-template-rows: repeat(3, auto);
}

.heroIntro-portrait {
  align-self: start;
  grid-column: -3 / -1;
  grid-row: 1 / -1;
  justify-self: center;
  mix-blend-mode: multiply;
}

.heroIntro-heading {
  display: block;
  grid-column: 1 / -3;
  grid-row: 1;
}

.heroIntro-headingText,
.heroIntro-body {
  grid-column: 1 / -3;
}

.heroIntro-body {
  align-self: center;
  grid-column: 1 / -1;
  grid-row: 2;
  margin-left: 0;
}

/* Main content area */
.summary-item + .summary-item {
  border-top: 1px dashed;
  margin-top: var(--S_default);
  padding-top: var(--S_default);
}

.projects-set + .projects-set {
  margin-top: var(--S_large);
}

.project > * {
  display: inline;
}

.project + .project {
  margin-top: var(--S_default);
}

.footer-contact {
  border-top: 1px solid;
  display: grid;
  font-size: var(--FS_small);
  grid-auto-rows: max-content;
  grid-gap: var(--S_small);
  grid-row-start: 2;
  grid-template-columns: max-content 1fr;
  padding-top: var(--S_large);
}

.heroIntro-headingText--start, 
.heroIntro-headingText--end {
  display: inline-block;
}

@media (min-width: 450px) {
  .heroIntro-body {
    grid-column: 1 / -3;
  }

  .heroIntro-headingText {
    grid-column: 1 / -2;
  }
}

@media (min-width: 650px) {
  .heroIntro-heading {
    display: contents;
    grid-column: -1 / 1;
  }

  .heroIntro-headingText--start {
    align-self: flex-end;
    grid-row: 1;
    transform: translateX(4vw);
  }
  
  .heroIntro-headingText--end {
    align-self: flex-start;
    grid-row: 3;
    transform: translateX(9vw);
  }

  .heroIntro-portrait {
    align-self: center;
  }

  .footer-contact {
    border-top: 0;
    padding-top: 0;
  }
}