header {
  padding-bottom: 2.5rem;
  position: relative;

  .header__flag {
    display: none;
    justify-content: center;
    text-align: center;

    .header__flag--content {
      background-color: var(--primary);
      color: white;
      padding: .5rem 9rem;
      border-radius: 0 0 1rem 1rem;

      @media screen and (max-width: 840px) {
        display: none;
      }
    }

  }

  .header__content {
    .container {
      padding-block: 2rem 0.625rem;
      display: grid;
      justify-content: space-between;
      grid-auto-flow: column;

      #logo {
        width: 219px;
        height: auto;
      }
      
      #login {
        display: grid;
        align-items: center;
        position: relative;

        @media screen and (max-width: 820px) {
          span {
            display: none;
          }
        }

        .button {
          display: grid;
          grid-auto-flow: column;
          gap: 0.5rem;
          align-items: center;

          padding-top: 1px;
          padding-bottom: 1rem;

          color: black;
          text-decoration: none;
          font-weight: 500;
          font-size: 1rem;
          line-height: 1rem;

          &:hover {
            border-color: var(--primary);
          }
        }

        .menu {
          position: absolute;
          right: 0;
          top: 0;
          z-index: 100;

          &.active .menu__content {
            display: grid;
          }

          .close__link {
            position: absolute;
            top: 1.5rem;
            right: 1rem;
          }

          .menu__logo {
            width: 1rem;
            position: absolute;
            bottom: 1.5rem;
            right: 1.3rem;
          }

          .menu__content {
            display: none;
            position: relative;
            background-color: white;
            padding: 1rem .5rem;
            border-radius: .5rem;
            box-shadow: 0px 3px 6px 0px #00000073;
            min-width: 16rem;

            a.menu__option {
              text-decoration: none;
              color: black;
              cursor: pointer;
            }

            .menu__option {
              padding: .75rem 1rem;
              font-size: 1.25rem;
              font-weight: 500;
              
              &.divisor {
                border-bottom: 1px solid var(--gray-light);
              }

              &.logged {
                font-weight: 300;

                b {
                  font-weight: 500;
                  color: var(--primary);
                }
              }
            }
          }
        }
      }
    }
  }
}