body {
  font-family: "Josefin Sans", sans-serif;
  font-optical-sizing: auto;
  min-height: 100vh;
  display: grid;
  grid-template-rows: 1fr auto;
}

main {
  display: grid;

  @media screen and (min-width: 1024px) {
    grid-template-columns: minmax(2rem, 1fr) minmax(0, 1440px) minmax(2rem, 1fr);
    align-content: center;
  }
}

.main-content-wrapper {
  display: grid;
  grid-template-rows: auto auto 1fr;
  background-image: var(--linear-gradient-100);

  header {
    padding: 2rem 1.5rem;
    background-color: white;

    img {
      width: 100px;
    }
  }

  picture img {
    width: 100%;
  }

  .central-content-wrapper {
    place-self: center;
    padding: 2rem;
    text-align: center;
    color: var(--primary-clr-100);
    max-width: 460px;

    h1 {
      line-height: 1.2;
      text-transform: uppercase;
      font-size: 2.5rem;
      font-weight: 300;

      span {
        display: block;
        letter-spacing: 0.25em;

        & + span {
          color: var(--neutral-clr-100);
          font-weight: 600;
        }
      }
    }

    .subtitle {
      margin-top: 1.5rem;
    }

    form {
      margin-top: 2rem;
      display: flex;
      border: 1px solid var(--primary-clr-100);
      border-radius: 28px;

      &.form-invalid {
        outline: 2px solid var(--primary-clr-200);
        .alert-icon {
          opacity: 1;
        }
      }

      input {
        padding: 0.85em 2em;
        background-color: transparent;
        outline: none;
        border: none;
        width: 90%;

        &::placeholder {
          color: var(--primary-clr-100);
        }
      }

      .alert-icon {
        align-self: center;
        opacity: 0;
      }

      button {
        outline: none;
        border: none;
        background-color: var(--primary-clr-100);
        background-image: var(--linear-gradient-200);
        cursor: pointer;
        border-radius: 28px;
        display: grid;
        place-items: center;
        margin-left: 1rem;
        width: 30%;
        max-width: 6.25rem;
        scale: 1.1;
        box-shadow: 0px 22px 63px -15px rgba(0, 0, 0, 0.35);

        &:hover,
        &:focus {
          filter: brightness(1.25);
          box-shadow: 0px 24px 48px -12px rgba(0, 0, 0, 0.28);
        }
      }
    }

    .error-message {
      text-align: start;
      margin-top: 1rem;
      padding-inline-start: 2em;
      color: var(--primary-clr-200);
    }
  }
}

@media screen and (min-width: 1024px) {
  .main-content-wrapper {
    grid-template-rows: auto 1fr;
    grid-template-columns: minmax(1.5rem, 1fr) 445px minmax(1.5rem, 1fr) auto;
    grid-column: 2;
    grid-template-areas:
      ". header . picture"
      ". central-content . picture";

    background-image: url("./images/bg-pattern-desktop.svg"),
      var(--linear-gradient-100);
    box-shadow: 0px 10px 25px 2px rgba(0, 0, 0, 0.24);

    header {
      grid-area: header;
      padding-inline: 0;
      background-color: transparent;

      img {
        width: auto;
      }
    }

    picture {
      grid-area: picture;

      img {
        width: auto;
      }
    }

    .central-content-wrapper {
      grid-area: central-content;
      text-align: start;
      padding-inline: 0;
      max-width: none;

      h1 {
        font-size: 4rem;
      }

      .subtitle {
        line-height: 1.7;
      }
    }
  }
}

footer {
  padding: 2rem;
  text-align: center;
  font-size: 0.875rem;
  a {
    color: var(--primary-clr-100);
    font-weight: 600;
    text-decoration-line: none;
  }
}

/* Utility Classes */
.sr-only {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}