: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%);
}

*,
*::after,
*::before {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
  font: inherit;
}

img,
picture,
svg {
  display: block;
  max-width: 100%;
}

body {
  min-height: 100vh;
  font-family: "Roboto", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  color: var(--blue-700);
}

.container-main {
  display: grid;
  /* display: none; */
}

img {
  object-fit: cover;
  object-position: top;
  border-radius: 0 0 20px 20px;
  width: 100%;
  max-height: 300px;
}

.contents {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 3rem 1.5rem;
}

.description {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

h1 {
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 700;
  color: var(--blue-800);
}

p {
  line-height: 1.5;
}

.feature-list {
  list-style: none;
}

.feature-item {
  position: relative;
  line-height: 1.5;
  padding-left: 2.5rem;
  margin-bottom: 0.8rem;
}

.feature-item::before {
  position: absolute;
  content: "";
  left: 0;
  width: 1.5rem;
  height: 1.5rem;
  background-image: url(./assets/images/icon-list.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.label-wrapper {
  font-size: 0.9rem;
  display: flex;
  justify-content: space-between;

  font-weight: 700;
  margin-bottom: 0.5rem;
}

.error-message {
  color: var(--red);
}

input {
  border-radius: 10px;
  outline: none;
  border: 1px solid var(--grey);
  padding: 1rem;
  width: 100%;
  margin-bottom: 1.5rem;
}

input::placeholder {
  color: var(--grey);
}

.error-email {
  border-color: var(--red);
  color: var(--red);
  background-color: rgb(255, 98, 87, 0.15);
}

.error-email::placeholder {
  color: var(--red);
}

button {
  cursor: pointer;
  transition: 200ms;
}

button:hover {
  background: linear-gradient(to right, #ff5379, #ff683f);
  box-shadow: 0 10px 15px 5px rgb(255, 98, 87, 0.4);
}

.submit-btn {
  width: 100%;
  padding: 1rem;
  border-radius: 10px;
  outline: none;
  border: none;
  background-color: var(--blue-800);
  color: var(--white);
}

/* Success Message */
.success-content {
  height: 100vh;
  display: none;
  flex-direction: column;
  justify-content: center;
  padding: 1.5rem;
  gap: 1.5rem;
}

.success-content span {
  font-weight: 700;
}

.success-icon {
  margin-top: 4rem;
  height: 4rem;
  width: 4rem;
  margin-bottom: 2rem;
}

.dismiss-btn {
  margin-top: auto;
  outline: none;
  border: none;
  border-radius: 10px;
  padding-block: 1rem;
  color: var(--white);
  background-color: var(--blue-800);
}

@media (min-width: 768px) {
  body {
    background-color: var(--blue-800);
    padding: 4rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .container-main {
    background-color: white;
    border-radius: 20px;
    grid-template-columns: 2fr 1.5fr;
    grid-template-areas: "grid-1 grid-2";
    max-width: 55rem;
  }

  img {
    object-position: none;
    border-radius: 30px;
    grid-area: grid-2;
    height: 100%;
    max-height: 100%;
    padding: 1rem;
  }

  .contents {
    grid-area: grid-1;
    justify-content: center;
    align-items: center;
    padding: 5rem 3rem 5rem 4rem;
  }

  form {
    align-self: flex-start;
    width: 100%;
  }

  .success-content {
    width: 30rem;
    height: 30rem;
    border-radius: 30px;
    background-color: white;
    padding: 3rem 3rem 4rem 3rem;
  }

  .success-icon {
    margin: 0;
    padding: 0;
    width: 3.5rem;
    height: 3.5rem;
  }
}

@media (max-width: 980px) {
  .contents {
    padding-inline: 2rem 1rem;
  }
}