.logo {
  color: currentColor;
  width: 12rem;
  transition: width .3s ease;
  position: relative;

  &.index {
    width: 16rem;
  }

  svg {
    width: 100%;
    display: block;
  }

  &.main {
    margin: calc(var(--spacing-sitepadding-block)*-.6) 0 0 calc(var(--spacing-sitepadding-inline)*-.6);
  }

  .christmas {
    position: absolute;
    bottom: 0;
    left: 0;
  }
}

.logoIcon {
  color: currentColor;
  width: 3rem;
  position: relative;

  svg {
    width: 100%;
    display: block;
  }

  &.right {
    transform: scaleX(-1);
  }

  .christmas {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 136.206897%;
  }
}

@media (min-width: 1920px) {
  .logo {
    &.main {
      margin: calc(var(--spacing-sitepadding-block)*-.6) 0 0 calc(var(--spacing-sitepadding-inline)*-.58);

      &.index {
        margin: calc(var(--spacing-sitepadding-block)*-.6) 0 0 calc(var(--spacing-sitepadding-inline)*-.78);
      }
    }
  }
}

@media (max-width: 800px) {
  .logo {
    width: 10rem;

    &.index {
      width: 12rem;
    }
  }
}