.philosophy-introduction {
  position: relative;
  overflow: hidden;
  
  & .philosophy-introduction__dec {
    opacity: 0.5;
    position: absolute;
    width: 100%;
    max-width: 81.25rem;
    top: -1.25rem;
    right: -1.25rem;
  }
  
  & .philosophy-introduction__image {
    position: relative;
    
    &::before {
      content: "";
      display: block;
      width: 100%;
      padding-top: 100%;
    }
    
    & img {
      position: absolute;
    }
    & img:first-child {
      width: 68%;
      top: 0;
      left: 0;
    }
    & img:last-child {
      width: 51%;
      bottom: 0;
      right: 0;
    }
  }
}


.philosophy-header {
  position: relative;
  padding-top: 3.75rem;
  z-index: 0;
  
  &::before {
    content: "";
    position: absolute;
    top: -5.625rem;
    left: -7.5rem;
    width: 12.1875rem;
    height: 12.1875rem;
    opacity: 0.8;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: -1;
  }
  
  &.philosophy-header--blue::before {
    background-image: url("data:image/svg+xml,%3Csvg%20width%3D%22195%22%20height%3D%22195%22%20viewBox%3D%220%200%20195%20195%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Ccircle%20cx%3D%2297.5%22%20cy%3D%2297.5%22%20r%3D%2297.5%22%20fill%3D%22%230000FF%22%20style%3D%22mix-blend-mode%3Ascreen%3B%22%20%2F%3E%0A%3Ccircle%20cx%3D%2263.2018%22%20cy%3D%2261.8848%22%20r%3D%2248%22%20fill%3D%22%23FF0000%22%20style%3D%22mix-blend-mode%3Ascreen%3B%22%20%2F%3E%0A%3Ccircle%20cx%3D%2290.953%22%20cy%3D%2248.0674%22%20r%3D%2217%22%20fill%3D%22%2300FF00%22%20style%3D%22mix-blend-mode%3Ascreen%3B%22%20%2F%3E%0A%3C%2Fsvg%3E%0A");
  }
  &.philosophy-header--red::before {
    background-image: url("data:image/svg+xml,%3Csvg%20width%3D%22195%22%20height%3D%22195%22%20viewBox%3D%220%200%20195%20195%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Ccircle%20cx%3D%2297.5%22%20cy%3D%2297.5%22%20r%3D%2297.5%22%20fill%3D%22%23FF0000%22%20style%3D%22mix-blend-mode%3Ascreen%3B%22%20%2F%3E%0A%3Ccircle%20cx%3D%2263.2018%22%20cy%3D%2261.8848%22%20r%3D%2248%22%20fill%3D%22%2300FF00%22%20style%3D%22mix-blend-mode%3Ascreen%3B%22%2F%3E%0A%3Ccircle%20cx%3D%2290.953%22%20cy%3D%2248.0674%22%20r%3D%2217%22%20fill%3D%22%230000FF%22%20style%3D%22mix-blend-mode%3Ascreen%3B%22%20%2F%3E%0A%3C%2Fsvg%3E%0A");
  }
  &.philosophy-header--green::before {
    background-image: url("data:image/svg+xml,%3Csvg%20width%3D%22195%22%20height%3D%22195%22%20viewBox%3D%220%200%20195%20195%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Ccircle%20cx%3D%2297.5%22%20cy%3D%2297.5%22%20r%3D%2297.5%22%20fill%3D%22%2300FF00%22%20style%3D%22mix-blend-mode%3Ascreen%3B%22%20%2F%3E%0A%3Ccircle%20cx%3D%2263.2018%22%20cy%3D%2261.8848%22%20r%3D%2248%22%20fill%3D%22%230000FF%22%20style%3D%22mix-blend-mode%3Ascreen%3B%22%20%2F%3E%0A%3Ccircle%20cx%3D%2290.953%22%20cy%3D%2248.0674%22%20r%3D%2217%22%20fill%3D%22%23FF0000%22%20style%3D%22mix-blend-mode%3Ascreen%3B%22%20%2F%3E%0A%3C%2Fsvg%3E%0A");
  }
}

.philosophy-outroduction-typo {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 80%;
  opacity: 50%;
  @media (min-width: 768px) {
    width: 20rem;
  }
  @media (min-width: 1024px) {
    width: 25rem;
  }
  @media (min-width: 1200px) {
    width: 31.25rem;
  }
}