#newsletter::before {
    background-color: #3f4d67;
  }
  
  #newsletter {
    display: grid;
    
    text-align: center;
    color: #ffffff;
    
    padding: 3em 1em;
  }
  
  #newsletter > div > h2 {
    margin-bottom: 0.5rem;
    color: #ffffff;
  }
  
  #newsletter > div > p {
    margin-top: 0em;
  }
  
  #newsletter > form {
    padding-top: 1em;
    
    display: flex;
    flex-flow: column nowrap;
  }
  
  #newsletter > form button {
    margin-top: 0em;
  }
  
  #newsletter > form input[type="text"] {
    flex: 1 0 auto;
    margin-bottom: 1em;
    text-align: center;
  }
  
  #newsletter .feedback {
    position: absolute;
    bottom: 0.5em;
    margin: 0em;
    padding: 0.2em 0.5em;
  }

  @media screen and (min-width: 500px) {
    
    #newsletter > form {
      flex-flow: row nowrap;
      align-self: center;
    }
    
    #newsletter > form input[type="text"] {
      max-width: 20em;
      margin-left: auto;
      margin-bottom: 0em;
      text-align: left;
    }
    
    #newsletter > form button {
      margin-top: 0em;
      margin-right: auto;
    }
  }

  @media screen and (min-width: 768px) {
  
    #newsletter .feedback {
      bottom: 0.5em;
    }
  }

  @media screen and (min-width: 900px) {
  
    #newsletter {
      grid-template-columns: 1fr 1fr;
      grid-column-gap: 6em;
    }
    
    #newsletter > div {
      justify-self: end;
    }
    
    #newsletter > form {
      width: auto;
      padding-top: 0em;
    }
    
    #newsletter > div > h2,
    #newsletter > div > p {
      text-align: left;
    }
    
    #newsletter .feedback {
      bottom: 1em;
    }
    
    #newsletter > form input[type="text"] {
      margin-left: 0em;
      max-width: 18em;
    }
    
    #newsletter > form button {
      margin-right: 0em;
    }
  }