.root {
  padding: rfs(160px) 0;
  background: linear-gradient(45deg, #fefbe4, #fdf0eb);
  clip-path: var(--clip-path);
}

.inner {
  @media (width > 900px) {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, auto);
    grid-column-gap: 5vw;
    grid-row-gap: 100px;
  }
}

.title {
  margin: 0;
  font-weight: normal;
  font-family: var(--font-sans);
  font-weight: bold;
  font-size: rfs(25px);
}

.mainStory {
  color: inherit;
  text-decoration: none;
  display: block;
  grid-column: 2 / 4;
}

.mainStory,
.otherUseCase {
  transition: all 150ms ease-in-out;
  margin-top: rfs(100px);
  padding-top: rfs(100px);
  border-top: 1px solid #888;

  &:hover {
    transform: translateY(-10px);
  }

  @media (width > 900px) {
    margin-top: 0;
    padding-top: 0;
    border: 0;
  }
}

.mainStoryTitle {
  margin: 0;
  font-weight: bold;
  font-family: var(--font-headline);
  font-size: rfs(70px);
  line-height: 1;
}

.otherUseCase {
  flex: 1;
  color: inherit;
  text-decoration: none;
  display: block;
  line-height: 1.3;
  position: relative;

  @media (width > 900px) {
    &:after {
      content: '';
      width: 1px;
      background: #888;
      position: absolute;
      top: 0;
      bottom: 0;
      left: calc(100% + 2.5vw);
    }

    &:last-child:after {
      display: hidden;
    }
  }
}

.otherUseCaseTitle {
  margin: 0;
  font-weight: normal;
  font-family: var(--font-serif);
  font-size: rfs(30px);
  line-height: 1.1;
}

.mainStoryLogo,
.otherStoryLogo {
  img {
    opacity: 0.78;
    height: rfs(30px);
    width: rfs(200px);
    object-fit: contain;
    object-position: left center;
  }
}

.mainStoryLogo {
  margin-bottom: rfs(30px);
}

.otherStoryLogo {
  margin-bottom: rfs(20px);
}

.goto {
  margin-top: rfs(30px);
  text-transform: uppercase;
  font-weight: bold;
  font-size: 0.9em;

  svg {
    height: 0.7em;
    margin-left: 10px;
  }
}
