_header.scss

Das ist eine ganz allgemeine, schnelle Lösung für Logo und Navigation im Header.

layout/_header.scss

@use "../abstracts/" as *;

$header-padding-block-start: 1.5rem;
$header-padding-block-end: 1.5rem;
$header-background-color: $color-neutral-000;
$header-color: $body-text-color;
$header-justify-content: space-between;
$header-align-items: center;

header {
  padding-block-start: $header-padding-block-start;
  padding-block-end: $header-padding-block-end;
  background-color: $header-background-color;
  border-block-end: 1px solid transparent;
  color: $header-color;

  // wrapper
  .inside {
    @include wrapper-inside;
  }

  // layout flex default
  .flex {
    display: flex;
    justify-content: $header-justify-content;
    align-items: $header-align-items;
  }

  // logo
  // clamp: min size: xrem @ 30rem | max-size: xrem @ 48rem
  @media (width < $tweakpoint-tablet) {
    .logo {
      width: clamp(10rem, 6.667rem + 11.111vw, 12rem);
    }
  }
}