@import "~styles/mixins";

.Header {
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  z-index: 9;
  padding: 0 20px;

  .container {
    max-width: $max-width-content;
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    margin: 0 auto;

    .logo {
      height: 100%;
    }

    .menu {
      display: flex;
      align-items: center;
      flex-shrink: 0;
    }

    .icon-menu {
      font-size: 26px;
      cursor: pointer;
    }
  }
}

.responsive {
  padding: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;

  >* {
    padding-bottom: 20px;
  }
}