:root {
  --color-red: hsl(0, 100%, 74%);
  --color-red-gradient: rgba(255, 122, 122, 0.6);
  --color-green: hsl(154, 59%, 51%);
  --color-blue: hsl(248, 32%, 49%);
  --color-dark-blue: hsl(249, 10%, 26%);
  --color-grayish-blue: hsl(246, 25%, 77%);
}

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  background-image: linear-gradient(
      to bottom,
      var(--color-red-gradient),
      var(--color-red-gradient)
    ),
    url("./images/bg-intro-mobile.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.main-row {
  width: 100%;
  max-width: 978px;
}

.try-text {
  background: var(--color-blue);
  color: var(--color-grayish-blue);
}

.form-input-group input {
  width: 100%;
  border: 1px solid var(--color-blue);
}

.form-input-group .text-end {
  /* opacity: 0; */
}

@media screen and (min-width: 768px) {
  body {
    background-image: linear-gradient(
        to bottom,
        var(--color-red-gradient),
        var(--color-red-gradient)
      ),
      url("./images/bg-intro-desktop.png");
  }
}