.sui-l-offline-splitted {
  min-height: 100vh;
  width: 100%;
  background: $sui-color-brand-denim-100;
  display: flex;

  &__aside {
    z-index: 1;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: $sui-color-brand-denim;
    background-image: linear-gradient(0deg, #425c80 0%, $sui-color-brand-denim 100%);

    @include suiMediaMin($sui-breakpoint-sm) {
      right: auto;
      width: $sui-l-offline-splitted-aside-width;

      &::before {
        display: block;
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        right: -$sui-l-offline-splitted-aside-width;
        width: $sui-l-offline-splitted-aside-width;
        background: $sui-color-brand-denim-100;
        transform: skew(-8deg);
        transform-origin: top left;
      }
    }
  }

  &__logo {
    z-index: 2;
    position: absolute;
    top: $sui-space-sm;
    left: $sui-space-sm;
    width: $sui-size-md;
    max-width: 100%;
    text-align: left;

    @include suiMediaMin($sui-breakpoint-sm) {
      width: 30%;
    }
  }

  &__mascot {
    display: none;

    @include suiMediaMin($sui-breakpoint-sm) {
      display: block;
      position: absolute;
      text-align: right;
      z-index: 2;
      top: 50%;
      left: rem(-101);
      right: rem(-49);
      opacity: 1;
      transform: translateY(-50%);
    }
  }

  &__content {
    z-index: 3;
    position: relative;
    padding: $sui-space-xxl+$sui-space-md $sui-space-md $sui-space-md $sui-space-md;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;

    @include suiMediaMin($sui-breakpoint-sm) {
      padding: 0 0 0 $sui-l-offline-splitted-aside-width;
    }

    &-inner {
      max-width: 100%;
      padding: $sui-space-md;
      background: $sui-color-brand-denim-100;
      border-radius: $sui-border-radius-md;
      box-shadow: $sui-shadow-100;

      @include suiMediaMin($sui-breakpoint-sm) {
        box-shadow: none;
      }
    }
  }
}