AboutSection.module.scss

@import '../utils/breakpoints';
@import '../utils/colors';

$header-height-small: 4em;
$header-height-large: 6em;

.root {
  display: flex;
  flex-direction: column;

  @include media-breakpoint-up(md) {
    flex-direction: row;
  }
}

.introductionContainer,
.divisionsOuterContainer {
  display: flex;
  align-items: center;
}

.introductionContainer {
  min-height: calc(100vh - #{$header-height-large});
  flex: 5;
  padding-top: 1em;
  padding-bottom: 1em;
  margin-right: 0;

  @include media-breakpoint-up(md) {
    min-height: calc(100vh - #{$header-height-small});
  }
}

.sectionTitle {
  margin-top: 0;
}

.divisionsOuterContainer {
  position: relative;
  flex: 7;
  justify-content: flex-end;
  background-blend-mode: multiply;
  background-color: $color-brand-primary;
  // TODO: Uncomment the line below when https://github.com/gatsbyjs/gatsby/issues/3665 gets fixed
  // background-image: url('../assets/about-section-background.jpg');
  background-size: cover;
  color: transparentize(white, $transparentize-amount);

  @include media-breakpoint-up(md) {
    clip-path: polygon(20% 0%, 100% 0, 100% 100%, 0% 100%);
  }
}

.divisionsInnerContainer {
  @include media-breakpoint-up(md) {
    margin-left: 0;
  }
}

.divisionsList {
  padding: 0;
  font-size: 1.5em;
  line-height: 3;
  list-style-type: none;
  text-align: right;
  text-transform: lowercase;

  > :hover {
    color: white;
  }
}