@import "/src/styles/mixins.scss";
@import "/src/styles/vars.scss";

#support {
  padding: 10.6em 7.5%;

  > div {
    display: flex;
    gap: 7.5%;
    max-width: 152em;
    margin: 0 auto;

    @media screen and (max-width: 47.99999rem) {
      flex-direction: column;
      flex-flow: column-reverse;
      align-items: flex-end;
      gap: 4em;
    }
  }

  .powered-by {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4em;

    @media screen and (min-width: 48rem) and (max-width: 56rem) {
      flex-direction: column;
    }

    a {
      color: $color-alto;

      &:hover {
        color: $color-white;
      }
    }

    .sia-logo svg {
      @include fluid-width(7.5rem);
    }

    .hns-logo svg {
      @include fluid-width(5.5rem);
    }

    .osi-logo svg {
      @include fluid-width(5.5rem);
    }

    @media screen and (max-width: 47.99999rem) {
      .sia-logo svg {
        @include fluid-width(3.75rem);
      }

      .hns-logo svg {
        @include fluid-width(2.75rem);
      }

      .osi-logo svg {
        @include fluid-width(2.75rem);
      }
    }
  }

  .feature-group {
    max-width: 80em;
  }
}
