.form-content {
  max-width: 100ch;
}
@media (max-width: 768px) {
  .form-content {
    max-width: 100%;
  }
}

.contact-info-wrapper {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 1em;
  margin: 0 auto 5em;
}
@media (max-width: 768px) {
  .contact-info-wrapper {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, auto);
  }
}
.contact-info-wrapper h3 {
  margin: 1em 0 0.5em;
}
.contact-info-wrapper .contact-info-detail {
  display: flex;
}
.contact-info-wrapper .contact-info-detail p {
  margin: 0;
}
.contact-info-wrapper .contact-info-detail .material-symbols-outlined {
  margin-right: 0.5em;
  font-size: 3em;
  align-self: center;
  color: #416d82;
  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
}
.contact-info-wrapper a {
  color: #181819;
}
.contact-info-wrapper a {
  transition: opacity 0.3s;
}
.contact-info-wrapper a:hover {
  opacity: 75%;
}

form {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 0.5em;
  margin: 2em 0 5em;
}
form .form-inputs-wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 1fr);
  column-gap: 2em;
}
@media (max-width: 768px) {
  form .form-inputs-wrapper {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, 1fr) 3fr;
  }
}
form .form-inputs-wrapper .form-input {
  display: flex;
  flex-direction: column;
}
form .form-inputs-wrapper #name-input {
  grid-column: 1/2;
  grid-row: 1/2;
}
form .form-inputs-wrapper #surename-input {
  grid-column: 1/2;
  grid-row: 2/3;
}
form .form-inputs-wrapper #email-input {
  grid-column: 1/2;
  grid-row: 3/4;
}
form .form-inputs-wrapper #message-input {
  grid-column: 2/3;
  grid-row: 1/4;
}
@media (max-width: 768px) {
  form .form-inputs-wrapper #message-input {
    grid-column: 1/2;
    grid-row: 4/6;
  }
}
form input[type=text], form input[type=email], form textarea {
  width: 100%;
  padding: 0.5em;
  margin: 0.5em 0;
  border: 2px solid #676767;
  height: 100%;
  background-color: #fafafa;
}
form button {
  background-color: #fafafa;
  color: #676767;
  padding: 0.75em 2em;
  border: 2px solid #676767;
  cursor: pointer;
  margin: 1em 0;
  float: right;
}
form button {
  transition: opacity 0.3s;
}
form button:hover {
  opacity: 75%;
}
@media (max-width: 576px) {
  form button {
    width: 100%;
  }
}

/*# sourceMappingURL=kontakt.css.map */