@use "settings";

.half-screen {
  background-color: settings.$bg;
  min-height: 100vh;
  max-width: 640px;
  overflow-y: auto;
  padding: settings.$padding-big * 2;
  transition: background-color .4s;
  width: 40%;

  @media #{settings.$tablet-portrait}, #{settings.$tablet-landscape} {
    background-color: settings.$bg;
    width: 54%;
  }

  @media #{settings.$phone-portrait}, #{settings.$phone-landscape} {
    background-color: settings.$bg-op-min;
    padding: settings.$mm-width settings.$padding-big;
    width: 100%;
  }

  > div {
    padding: settings.$padding-big;
  }

  &__logo {
    color: settings.$primary;
    height: 144px;

    svg {
      height: 100%;
    }

  }

}