lbry.tech/.vuepress/scss/pages/_overview.scss

.overview {
}

.overview__ecosystem {
  margin-bottom: 2rem; padding-top: 1rem;

  display: grid;
  grid-gap: 2rem;
  font-size: 1rem;

  @media (min-width: 1081px) {
    grid-template-columns: auto 5% 144px auto 144px;
  }
}



.overview__ecosystem__module {
  min-height: 144px;

  &.lbrycard,
  &.lbryschema,
  &.lbryumx,
  &.lbry,
  &.lighthouse,
  &.chainquery {
    @include center;

    .__title {
      color: $white;
      font-size: 1rem;
    }
  }



  &.lbrycard {
    background-color: $black;

    @media (min-width: 1081px) {
      grid-row: 1/3;
    }

    @media (max-width: 1080px) {
      grid-row: 1;
    }

    @media (min-width: 501px) {
      grid-column: 1;
    }
  }

  &.lbryschema {
    background-color: $red;
    position: relative;

    @media (min-width: 1081px) {
      grid-row: 1/3;

      .__title {
        transform: rotate(-90deg);
        transform-origin: 50% 50%;
      }
    }

    @media (min-width: 501px) and (max-width: 1080px) {
      grid-row: 1;
    }

    @media (min-width: 501px) {
      grid-column: 2;
    }

    @media (max-width: 500px) {
      grid-row: 2;
    }
  }



  &.lbryumx {
    background-color: $blue;
    border-radius: 50%;

    @media (min-width: 1081px) {
      grid-column: 3;
      grid-row: 1;
    }

    @media (max-width: 1080px) {
      grid-row: 3;
      margin-right: auto;
      margin-left: auto;
      width: 144px;
    }

    @media (min-width: 501px) and (max-width: 1080px) {
      grid-column: 2;
    }

    @media (max-width: 500px) {
      grid-row: 4;
    }
  }

  &.lbry {
    background-color: $green;

    @media (min-width: 1081px) {
      grid-column: 3;
      grid-row: 2;
    }

    @media (max-width: 1080px) {
      grid-row: 3;
    }

    @media (min-width: 501px) and (max-width: 1080px) {
      grid-column: 1;
    }

    @media (max-width: 500px) {
      grid-row: 3;
    }
  }



  &.applications {
    @include center;
    background-color: $violet;
    list-style-type: none;
    text-align: center;

    @media (min-width: 1081px) {
      grid-column: 4;
      grid-row: 1/3;
    }

    @media (max-width: 1080px) {
      padding-top: 1rem;
      padding-bottom: 2rem;
    }

    @media (min-width: 501px) and (max-width: 1080px) {
      grid-row: 4;
      grid-column: 1/3;
    }

    @media (max-width: 500px) {
      grid-row: 5;
    }

    > div {
      width: 100%;

      > .__title {
        color: $white;
        display: block;
        margin-bottom: 1rem;
      }
    }
  }



  &.lighthouse {
    background-color: $pink;
    border-radius: 50%;

    @media (min-width: 1081px) {
      grid-column: 5;
      grid-row: 1;
    }

    @media (max-width: 1080px) {
      margin-right: auto;
      margin-left: auto;
      width: 144px;
    }

    @media (min-width: 501px) and (max-width: 1080px) {
      grid-column: 1;
      grid-row: 5;
    }

    @media (max-width: 500px) {
      grid-row: 6;
    }
  }

  &.chainquery {
    background-color: $orange;
    border-radius: 50%;

    @media (min-width: 1081px) {
      grid-column: 5;
      grid-row: 2;
    }

    @media (max-width: 1080px) {
      margin-right: auto;
      margin-left: auto;
      width: 144px;
    }

    @media (min-width: 501px) and (max-width: 1080px) {
      grid-column: 2;
      grid-row: 5;
    }

    @media (max-width: 500px) {
      grid-row: 7;
    }
  }
}



.overview__ecosystem__module__piece {
  background-color: $white;
  left: 10%;
  line-height: 2;
  position: relative;
  width: 80%;

  &:not(:last-of-type) {
    margin-bottom: 0.5rem;
  }
}