#header {
  .block-system-branding-block {
    @media (max-width: $screen-sm-max) {
      & {
        display: none;
      }
    }

    @media (min-width: $screen-md-min) {
      & {
        margin: 0 auto 0 0;

        a.logo {
          display: inline-block;
          display: flex;
          padding: 38px 0 38px 0;
          text-decoration: none;

          .image {
            display: block;
            padding-right: 18px;

            img {
              width: auto;
              height: 74px;
            }
          }

          .title {
            display: flex;
            flex-direction: column;
            justify-content: center;

            .site-name {
              display: block;
              color: var(--primary-dark);
              font-family: 'Geologica', sans-serif;
              font-size: 30px;
              font-weight: 600;
            }

            .site-slogan {
              position: relative;
              top: -5px;
              display: block;
              color: var(--primary-dark);
              font-family: 'Geologica', sans-serif;
              font-size: 15px;
              font-weight: 100;
            }
          }
        }
      }
    }
  }
}
