.logo-and-wordmark-wrapper {
  // Override default h1 margins
  margin-block: 0;
}

.logo-and-wordmark {
  $logo-size: 64px;
  $wordmark-size: 105px;

  align-items: center;
  display: flex;
  justify-content: center;
  // Bug 1967304 - Large number (48px)
  margin-block-end: var(--space-xxlarge);

  // Edge case for users who have pocket stories turned off
  .no-recommended-stories & {
    // Bug 1967304 - Large number (40px)
    margin-block-end: calc(var(--space-large) + var(--space-xlarge));
  }

  .logo {
    display: inline-block;
    height: $logo-size;
    width: $logo-size;
    background: image-set(url('chrome://branding/content/about-logo.png'), url('chrome://branding/content/about-logo@2x.png') 2x) no-repeat center;
    background-size: $logo-size;
  }

  .wordmark {
    background: url('chrome://branding/content/firefox-wordmark.svg') no-repeat center center;
    background-size: $wordmark-size;
    -moz-context-properties: fill;
    display: inline-block;
    fill: var(--newtab-wordmark-color);
    height: $logo-size;
    margin-inline-start: var(--space-large);
    width: $wordmark-size;

    // Contrast fix for users who have wallpapers set
    @include wallpaper-contrast-fix;
  }

  @media (max-width: $break-point-medium - 1) {
    $logo-size-small: 64px;
    $wordmark-small-size: 100px;

    .logo {
      background-size: $logo-size-small;
      height: $logo-size-small;
      width: $logo-size-small;
    }

    .wordmark {
      background-size: $wordmark-small-size;
      height: $logo-size-small;
      width: $wordmark-small-size;
      margin-inline-start: var(--space-medium);
    }
  }
}

