@layer behavior {
  body {
    overflow: hidden auto;
    scrollbar-gutter: auto;
  }
}

@layer layout {
  .entry {
    position: relative;
    display: grid;
    grid: 1fr / 1fr;
    align-items: center;
    block-size: 100dvh;

    .entry-board {
      z-index: 1;
      display: flex;
      flex-flow: column nowrap;
      row-gap: clamp(4rem, 5cqi, 6rem);
      justify-content: space-between;
      padding: clamp(4rem, 5cqi, 6rem) 2rem;
      margin: auto;
    }

    .entry-logo {
      margin-inline: auto;
      opacity: 0.93;

      & > img {
        inline-size: 8rem;
        block-size: auto;
      }
    }

    .entry-title,
    .entry-description {
      text-align: center
    }

    .entry-title {
      margin-block-end: 0.625rem;
      color: var(--clr-brand-50);
      font-family: var(--ff-text);
      font-size: 1.25rem;
      letter-spacing: 0.005rem;
    }

    .entry-description {
      display: flex;
      flex-flow: column nowrap;
      gap: 0.375rem;
      inline-size: min(100%, 20rem);
      color: var(--clr-brand-300);
      margin: auto;
      font-size: 0.875rem;

      & > strong {
        display: block;
        color: var(--clr-brand-100);
        font-size: 1rem;
      }
    }

    .entry-support {
      display: flex;
      flex-flow: column nowrap;
      justify-content: center;
      align-items: center;
      column-gap: 0.625rem;
      row-gap: 0.5rem;
      color: var(--clr-brand-600);

      & > span {
        display: none;
      }

      @media screen and (min-width: 28rem) {
        flex-direction: row;

        & > span {
          display: block;
        }
      }
    }

    .entry-info {
      display: grid;
      gap: 0.75rem;
      font-size: 0.875rem;
      color: var(--clr-brand-950);
      opacity: 0.8;
      text-align: center;
    }

    .entry-artwork {
      position: absolute;
      inset-inline-start: -20%;
      inset-inline-end: -20%;
      inset-block-end: 2%;
      z-index: 0;
      max-inline-size: unset;

      @media screen and (min-width: 38rem) {
        inset-inline-start: unset;
        inset-inline-end: 0;
        inset-block-end: 0;
        inline-size: min(100%, 35rem);
      }
    }
  }
}

@layer partial {
  .login,
  .registration,
  .reset-password {
    display: flex;
    flex-flow: column nowrap;
    gap: clamp(2rem, 4cqi, 3rem);
    inline-size: min(100%, 22rem);
    border-radius: 0.625rem;
    margin: auto;
  }

  .login,
  .registration,
  .reset-password {
    position: relative;

    .form-field {
      --gap: 0.875rem;
    }

    .form-widget {
      --background-color: color-mix(in oklab, var(--clr-brand-50), transparent 10%);
      --border-color: var(--clr-brand-100);
    }

    .form-footer {
      --margin-block-start: 1.625rem;
    }
  }
}