@font-face {
  font-family: "Roboto";
  src: url(assets/fonts/Roboto-Regular.ttf) format("ttf");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Roboto";
  src: url(assets/fonts/Roboto-Bold.ttf) format("ttf");
  font-weight: 700;
  font-style: normal;
}

:root {
  --red: hsl(4, 100%, 67%);
  --blue-800: hsl(234, 29%, 20%);
  --blue-700: hsl(235, 18%, 26%);
  --Grey: hsl(0, 0%, 58%);
  --white: hsl(0, 0%, 100%);

  --desktop-picture-width: calc(10rem + 15vw);
  --desktop-picture-height: calc(var(--desktop-picture-width) / 0.6745);
}

body {
  font-family: "Roboto", sans-serif;
  color: var(--blue-700);
  display: flex;
  justify-content: center;
  background-color: var(--white);
}

article {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: white;
}

picture {
  width: 100vw;
}

picture img {
  width: 100%;
}

section {
  container-type: inline-size;
  width: calc(20rem + 40vw);
  max-width: 100vw;
}

.text-wrap {
  padding: 2em 1.5em;
  font-size: 4.25cqi;
}

h1 {
  font-size: 2.3em;
  margin-bottom: 0.4em;
  color: var(--blue-800);
}

ul {
  padding-left: 2em;
  list-style-type: none;
  margin-bottom: 2em;
}

li {
  position: relative;
}

li:not(:last-child) {
  margin-bottom: 0.7em;
}

li::before {
  content: "";
  width: 1.1em;
  height: 1.1em;
  position: absolute;
  top: 10%;
  left: -10%;
  background: url(assets/images/icon-list.svg) no-repeat center/contain;
}

.thickle {
  font-size: 0.7em;
  font-weight: 700;
  color: var(--blue-700);
}

.hide {
  display: none;
}

#div-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

input,
button {
  display: block;
  width: 100%;
  border-radius: 0.5em;
  padding: 1em 1.35em;
  margin-bottom: 1.5em;
  margin-top: 0.3em;
  border: 0.07em solid var(--Grey);
}

button {
  margin-bottom: 0;
  background-color: var(--blue-800);
  color: var(--white);
  border: none;
}

#email-field.error #email-error,
#email-field.error input {
  color: red;
}

#email-field.error input {
  background-color: hsl(from var(--red) h s l / 0.17);
  border-color: red;
}

#success-content h1 {
  line-height: 1em;
}

#success-content button {
  margin-top: 16.5em;
}

#success-content .text-wrap {
  margin-top: 8em;
}

#success-content .text-wrap::before {
  content: "";
  display: block;
  width: 4em;
  height: 4em;
  background: url(assets/images/icon-success.svg) no-repeat center/contain;
  margin-bottom: 3em;
}

@media screen and (min-width: 64em) {
  body {
    background-color: var(--blue-700);
    align-items: center;
  }

  article {
    border-radius: 2.5em;
  }

  #main-content {
    flex-direction: row-reverse;
    align-items: stretch;
    justify-content: center;
    width: fit-content;
    padding: 1.5em;
  }

  #success-content button {
    margin-top: 2.5em;
  }

  #success-content .text-wrap {
    margin-top: 0;
  }

  .img-wrap {
    width: var(--desktop-picture-width);
    height: 100%;
  }

  picture {
    width: 100%;
    height: 100%;
  }

  picture img {
    object-fit: contain;
  }

  section {
    width: calc(1.2 * var(--desktop-picture-width));
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .text-wrap {
    padding: 3.7em 3em;
    font-size: 3.4cqi;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
  }

  h1 {
    font-size: 3.3em;
  }

  li::before {
    width: 1.35em;
    height: 1.35em;
    left: -10%;
  }
}