.o-user {
  --form-column: 1;
  --text-column: 2;
  margin-top: calc(var(--header-height) * -1);
}
@media screen and (min-width: 990px) {
  .o-user[data-form-position=right] {
    --form-column: 2;
    --text-column: 1;
  }
}
.o-user__inner {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  isolation: isolate;
}
.o-user__header {
  margin-bottom: 1rem;
}
.o-user__header .a-link {
  display: inline-block;
}
.o-user__heading {
  display: inline-block;
  width: 100%;
}
.o-user__image-container {
  grid-column: 1/-1;
  grid-row: 1/-1;
  z-index: -1;
  position: relative;
}
.o-user__image-container::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--overlay-bg);
}
.o-user__image {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.o-user__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.o-user__form-container {
  grid-column: 1/-1;
  grid-row: 1/-1;
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-flow: dense;
  align-content: center;
  gap: var(--spacing-md);
  padding-block: calc(var(--header-height) + var(--spacing-xl)) var(--spacing-xl);
}
@media screen and (min-width: 990px) {
  .o-user__form-container {
    grid-template-columns: repeat(2, 1fr);
  }
}
.o-user__form-container--reset {
  padding: var(--spacing-xl) 0;
}
@media screen and (min-width: 990px) {
  .o-user__form-container--reset {
    grid-template-columns: 1fr;
  }
}
@media screen and (min-width: 990px) {
  .o-user__reset {
    margin: 0 auto;
  }
}
.o-user__reset form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.o-user__reset form .a-btn {
  margin: 0 auto;
}
.o-user__form-fields {
  width: 100%;
  margin-bottom: 3.2rem;
  display: grid;
  gap: var(--spacing-md);
}
.o-user__form-fields .errors ul {
  padding-left: 1.8rem;
  margin-top: 0.5rem;
}
.o-user__form-fields .o-user__errors-title {
  width: 100%;
}
.o-user__form-fields .o-user__errors-list,
.o-user__form-fields #register-form-email-error,
.o-user__form-fields #register-form-password-error,
.o-user__form-fields .o-user__errors-title,
.o-user__form-fields .errors {
  text-align: left;
}
.o-user__form-fields .a-checkbox__label {
  text-align: left;
}
.o-user__link--cancel {
  margin-top: 0.8rem;
}
.o-user__btns-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
}
.o-user__errors-title {
  outline: none;
  margin-bottom: 0;
}
.o-user__errors-list {
  padding-left: 1.8rem;
  margin-top: 0.5rem;
}
.o-user__forgot-password-link {
  margin: 1rem 0;
}
.o-user__recover-success:focus-visible {
  outline: none;
}
.o-user #register-form-password-error,
.o-user #register-form-email-error {
  display: block;
  margin-top: 0.5rem;
}
.o-user .a-input {
  margin-bottom: 0;
}
.o-user__intro {
  grid-column: 1;
  align-self: var(--v-pos);
  justify-self: var(--h-pos);
}
@media screen and (min-width: 990px) {
  .o-user__intro {
    grid-column: var(--text-column);
    max-width: 27rem;
  }
}
@media screen and (min-width: 990px) {
  .o-user__intro-inner {
    max-width: var(--max_width);
  }
}
.o-user__form {
  justify-self: center;
  grid-column: var(--form-column);
  border-radius: var(--border-radius-20);
  padding: var(--spacing-lg);
  width: 100%;
  max-width: 45rem;
}
@media screen and (min-width: 990px) {
  .o-user__form {
    max-width: 31rem;
  }
}
.o-user__has-account {
  display: grid;
  gap: var(--spacing-md);
}
.o-user__has-account p {
  margin: 0;
}

#recover {
  display: none;
}

#recover:target {
  display: block;
}

#recover:target ~ #login {
  display: none;
}