@import "../util";

$apisix-color: #e8433e;

.endcta {
  padding: max(14vh, 100px) 2rem;
  margin: 4em 10% 0;
  background-color: #f8f8f8;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  border-radius: 1em;

  & .text {
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: pre;
    text-transform: capitalize;
    font-size: 4.5rem;
    font-weight: bolder;
    font-family: MaisonNeue-ExtraBold, sans-serif;
    position: relative;
    width: fit-content;

    & .apisix {
      color: $apisix-color;
    }

    & .rocket {
      $size: 10rem;

      position: absolute;
      right: -#{$size};
      width: $size;
      height: $size;
      bottom: 0.3em;
      transform: rotate(45deg);
    }
  }

  & .links {
    display: flex;
  }

  @include respond-below(lg) {
    & .text {
      & .rocket {
        display: none;
      }
    }
  }

  @include respond-below(sm) {
    min-height: 50vh;
    margin: 4rem 1rem 0;
    align-items: flex-start;
    padding: 100px 2rem;

    & .text {
      flex-direction: column;
      font-size: 2.5rem;
      align-items: flex-start;

      & .apisix {
        margin: -1rem 0;
      }
    }
  }
}
