main {

  div.brand {

    margin: 2rem auto;
    width:  70%;

    img.logo {
      height: auto;
      margin: 2rem auto 0 auto;
      width:  100%;
    }

    p {
      margin:         0 auto;
      text-align:     center;
      font-weight:    bold;
      font-size:      1.7rem;
      letter-spacing: 0.1rem;
    }

    img.lion {
      display:  block;
      margin:   2rem auto 2rem auto;
      width:    33%;
    }

  }

  p {
    margin:     2rem auto 1rem auto;
    width:      80%;
    text-align: center;
  }

  div.lang-comparison {

    border-radius:  3vh;
    border-width:   0.25vh;
    border-style:   solid;

    display:        flex;
    flex-direction: column;
    gap:            1.4rem;
    margin:         3rem auto;
    padding:        1rem;
    width:          80%;

    border-color: var(--baseDecoration);

    div {
      width:      100%;

      img { border-radius: 3vh; float: left; height: auto; width: 40%; }

      p {
        float:      right;
        padding:    0 0 0 2rem;
        margin:     0;
        width:      60%;

        font-size:  0.9rem;
        text-align: left;
      }

      p.small {margin-top: 0; padding-top: 0; }

    }

    ol {

      display:          flex;
      flex-direction:   row;
      justify-content:  space-between;
      vertical-align:   middle;
      margin:           0 auto;
      padding:          0 0.5rem;
      width:            fit-content;

      font-size:        0.8rem;

      li {

        cursor:         pointer;
        margin:         0 0.5rem;
        text-wrap:      nowrap;
        line-height:    1.2;
        list-style:     none;

        color:          var(--baseOverDecor);

        img { height: 2rem; padding-bottom: 0.3rem; width: auto; }

      }

      .current { border-bottom: 3px solid var(--baseDecoration); }

    }

  }

  p.subscribe {

    border-style:     solid;
    border-width:     0.5rem;
    border-radius:    1rem;
    margin:           3rem auto;
    padding:          0.66rem 1.33rem;
    text-align:       center;
    width:            fit-content;

    font-size:        2rem;
    font-weight:      bold;
    letter-spacing:   0.25rem;

    background-color: var(--baseDecoration);
    border-color:     #d40000ff;

    a         { color: var(--baseOverDecor); text-decoration: none; }
    a:visited { color: var(--baseOverDecor);  }
    a:hover   { color: var(--baseText); }
    a:focus   { color: var(--baseOverDecor);  }
    a:active  { color: var(--baseOverDecor);  }

  }

}

div.cookies-consent {

  border-style:     solid;
  border-width:     0.15rem 0 0 0;
  border-radius:    0.5rem;

  position:         fixed;
    bottom:         4%;
  margin:           0 2%;
  padding:          2% 0;
  width:            96%;

  font-size:        0.9rem;

  background-color: var(--gdprBG);

  & ul {

    display:          flex;
    flex-direction:   row;
    justify-content:  flex-end;
    padding:          0.25em 3%;
    width:            94%;

  }

  & li {

    border-radius:  0.5rem;
    margin:         0 0 0 0;
    padding:        1em 1em;
    list-style:     none;

    font-size:      0.8rem;

    color:          var(--gdprText);

  }

  & li:last-of-type {

    cursor:         pointer;
    display:        flex;
      flex-direction: row;
      align-items:    center;

    font-size:      0.9rem;
    text-align:     center;

    background-color: var(--btnSuccessBG);
    color:            var(--btnSuccessText);

  }

  & li:last-of-type:hover { color: var(--baseDecoration); }

  & a         { color: var(--gdprLink);  outline: none; }
  & a:visited { color: var(--gdprVisited);  }
  & a:hover   { color: var(--gdprHover);    }
  & a:active  { color: var(--gdprLink);     }

}

@media only screen and (max-width: 767px) {

  main div.brand {

    margin: 2rem auto;
    width:  70%;

    img {
      margin: 2rem auto 0 auto;
    }

    p {
      margin:         0.2rem auto 0 auto;
      text-align:     center;
      letter-spacing: 0.1rem;
      width:          100%;

      font-weight:    bold;
      font-size:      1rem;
    }

    img:last-of-type {
      margin: 2rem auto 2rem auto;
      width:  46%;
    }

  }

  main div.lang-comparison {

    width: 70%;

    div img { float: none; width: 100%; }

    div p { float: none; padding: 1rem 0; width: 100%; }

    div p.small {margin-top: 0.25em; }

  }

}


@media  only screen and (max-width: 479px) {

  article > p { width: 90%; }

  main div.brand {

    margin: 2rem auto;
    width:  80%;

    img.logo {
      margin: 2em auto 0 auto;
    }

    p {
      margin:         0.2rem auto 0 auto;
      text-align:     center;
      font-weight:    bold;
      font-size:      1.2rem;
      letter-spacing: 0.1rem;
      width:          100%;
    }

    img.lion {
      margin: 2rem auto 2rem auto;
      width: 33%;
    }

  }

}