@use "sass:math";

@import '~styles/config';

.heroDock {
  @include container;

  height: 120px;
  @media (min-width: $min-mobile) {
    height: 80px;
  }
  @media (min-width: $min-tablet) {
    height: auto;
  }

  &__wrapper {
    @include grid-row;
    position: relative;
    z-index: 18;
    margin-top: -130px;
    padding-top: 0;

    height: 100%;

    @media (min-width: $min-mobile) {
      margin-top: -90px;
    }
  }

  &__items {
    @include reset-all;
    @include grid-col;
    display: flex;
    justify-content: space-between;

    flex-wrap: wrap;

    align-items: flex-end;

    @media (min-width: $min-tablet) {
      justify-content: flex-start;
      flex-wrap: nowrap;
    }

    .subDock & {
      @include grid-col();

      padding-right: 30px;

      @media (min-width: $min-desktop) {
        @include grid-col(percentage(math.div(11, 12)));
        margin-left: percentage(math.div(1, 12));
      }
    }
  }
}