open-consul/website/components/consul-on-kubernetes-hero/style.module.css

.ckHero {
  background-color: var(--black);
  color: var(--white);
  padding-top: 130px;
  padding-bottom: 142px;
  overflow: hidden;

  @media (--medium) {
    padding-top: 78px;
    padding-bottom: 104px;
  }

  @media (--small) {
    padding-top: 56px;
    padding-bottom: 80px;
  }
}

.contentWrapper {
  --columns: 1;

  column-gap: 32px;
  composes: g-grid-container from global;
  display: grid;
  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
  row-gap: 48px;

  @media (--medium-up) {
    --columns: 12;
  }

  & .headline {
    text-align: center;
    grid-column: 1 / -1;
    margin: 0 auto;

    @media (--large) {
      margin: 0;
      text-align: left;
      grid-column: 1 / 6;
    }

    & .buttons {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;

      @media (--large) {
        justify-content: flex-start;
      }

      & .button:not(:last-of-type) {
        margin-right: 30px;
      }
    }
  }

  & .media {
    position: relative;
    grid-column: 1 / -1;

    @media (--medium) {
      grid-column: 3 / 11;
    }

    @media (--large) {
      grid-column: 7 / -1;
    }

    & > div {
      border: 1px var(--gray-3) solid;
      border-radius: 4px;
    }

    & .video {
      background-color: var(--black);
      position: relative;
      padding-top: 56.25%;
      width: 100%;

      & .player {
        position: absolute;
        top: 0;
        left: 0;

        & div {
          border-radius: 4px;
        }
      }

      & iframe {
        border-radius: 4px;
      }

      & > * {
        bottom: 0;
        height: 100%;
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
        width: 100%;
      }
    }
  }
}

.title {
  composes: g-type-display-1 from global;
  margin: 0;
}

.description {
  composes: g-type-body-large from global;
  margin-top: 16px;
  margin-bottom: 40px;
  color: var(--gray-5);
  max-width: 500px;

  @media (--large) {
    max-width: 385px;
  }
}

.backgroundImage {
  height: auto;
  position: absolute;
}

.bgTop {
  composes: backgroundImage;
  left: auto;
  right: 0;
  top: -130px;
  display: none;
  width: 75%;

  @media (--large) {
    display: block;
  }
}

.bgRight {
  composes: backgroundImage;
  top: 20%;
  left: 99.5%;
}

.bgBottom {
  composes: backgroundImage;
  width: auto;
  top: 80%;
  left: 8%;
}

.bgLeft {
  composes: backgroundImage;
  width: auto;
  top: 86px;
  left: -77px;
}