@use '../mixins';

@use '@jambonz/ui-kit/src/styles/vars' as ui-vars;

/******************************************************************************
 * Regions
*******************************************************************************/
.regions {
  text-align: center;
  margin-top: 64px;

  @media (max-width: ui-vars.$width-tablet-1) {
    margin-top: 32px;
  }

  &__wrap {
    @include mixins.flex-cols();
    padding-bottom: 64px;

    @media (max-width: ui-vars.$width-mobile) {
      padding-bottom: 32px;
    }
  }

  &__icon {
    padding-bottom: 24px;

    @media (max-width: ui-vars.$width-mobile) {
      padding-bottom: 16px;
    }
  }

  &__text {
    color: ui-vars.$black;
    transition: color ui-vars.$base-dur ui-vars.$base-ease;

    &:hover {
      color: ui-vars.$jambonz;
    }
  }
}