@import url("./global.css");


article {
  background-color: var(--clr-white);
  min-height: 100vh;

  display: flex;
  flex-direction: column;
  gap: var(--spacing-500);
}

article img {
  min-width: 100%;
  display: block;
}

.stack > *+* {
  margin-block-start: var(--default-spg, var(--spacing-300));
}

.content {
  padding-inline: var(--spacing-200);
}

.content p {
  line-height: 1.5;
}

.content form {
  --default-spg: var(--spacing-500);
}

.form-control {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-100);
}

.labels {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.form-control label,
.error-label {
  font-size: var(--text-3);
}

.error-label {
  visibility: hidden;
  color: var(--clr-red);
}

.form-control input {
  padding: var(--spacing-200) var(--spacing-300);
  font-size: var(--text-2);
  color: var(--clr-blue-800);
  border-radius: 0.5rem;
  border: 1px solid var(--clr-grey);
}

.form-control input:focus {
  outline: 1px solid var(--clr-blue-800);
}

.form-control input:invalid {
  outline: 1px solid var(--clr-red);
  background-color: var(--clr-red-100);
  color: var(--clr-red);
}

button {
  text-decoration: none;
  text-align: center;
  display: block;
  width: 100%;
  background-color: var(--clr-blue-800);
  color: var(--clr-white);
  border-radius: 0.5rem;
  padding-block: var(--spacing-200);
  font-size: var(--text-2);
  border: none;
}

button:hover {
  background: var(--clr-gradient);
  box-shadow: 0px 1rem 2rem rgba(255, 97, 85, 0.5);
}


@media (width > 38rem) {

  body {
    display: grid;
    place-items: center;
  }

  main {
    min-height: auto;
  }

  article {
    min-height: auto;
    padding: var(--spacing-500);
    border-radius: 2.25rem;
  }

  article img {
    border-radius: 1rem;
  }

  .content {
    padding: 0;
  }
}

@media (width > 56.5rem) {

  article {
    max-inline-size: 56.5rem;
    margin-inline: auto;
    flex-direction: row-reverse;
    gap: var(--spacing-800);
    padding: var(--spacing-400);
    --default-spg: var(--spacing-400);
  }

  .content {
    align-self: center;
  }

  ul {
    padding-inline-end: var(--spacing-200);
  }
}