.first-form {
    /* background-color: rgba(255, 255, 255, 1); */
    background-color: whitesmoke;
    color: black;

    border-radius: 0.5rem;

    padding-inline: 1rem;
    padding-bottom: 2rem;
    margin-right: 3rem;

    text-align: center;
    transition: 300ms ease-in-out;

    height: min-content;
}
.first-form:focus-within {
    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}
.first-form:hover {
    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}
.first-form h2 {
    margin-top: 1rem;
    margin-bottom: 1rem;
}
.hero-content {
    margin-right: 2rem;
    margin-left: 3rem;
    text-align: left;
}
.first-form input {
    width: 95%;

    border: 1px grey solid;
    margin-left: 0.5rem;
    padding-left: 0.5rem;
}
.first-form input:focus {
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}
.two-column-form {
    display: grid;
    grid-template-columns: auto auto;
}
.two-column-form input {
    width: 90%;
    /* border: none; */
    border: 1px grey solid;
    justify-content: center;

    gap: 1rem;
}

/* .btn-round {
    border-radius: 2rem;
    border: solid 2px white;
    padding: 0.5rem;
    font-family: 'Lato';
    color: white;
    background-color: #30333f;
    transition: ease-in-out 250ms;
    font-size: clamp(1rem, 2vw, 1.2rem);
}
.btn-round:hover {
    background-color: white;
    color: #30333f;
} */

.hero-content-container {
    max-width: 100rem;
    margin: auto;
    margin-top: 10%;
    font-family: 'Lato', 'sans-serif';
}

.info-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  place-items: center;
  
  background-size: cover;
  background-repeat: no-repeat;   
  background-position: center;

  padding-block: 2rem;
  max-width: 70rem;
  margin-inline: auto;
}
.info-div {
  max-width: 20rem;
  border-radius: 0.5rem;
  background-color: white;

  box-shadow: rgba(0, 0, 0, 0.10) 0px 10px 20px, rgba(0, 0, 0, 0.15) 0px 6px 6px;
  margin: 1rem;
  padding: 1rem;

  transition: 250ms ease-in-out;
}
.info-div:hover {
  box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}
.info-div h2 {
  text-align: center;
  margin-top: 0.5rem;
}

@media screen and (max-width: 55rem) {
    .first-form {
        margin-inline: 2rem;
        margin-bottom: 2rem;
    }
    .hero-content {
        text-align: center;
    }
    .shrinking-label {
        font-size: clamp(0.5rem, 1.5vw, 2rem);
    }

    .info-container {
      grid-template-columns: 1fr;
    }

    .info-div {
      max-width: 80%;
      text-align: center;
    }
}