h1 {
  font-size: xx-large;
  padding: 10px;
}

#subtitle {
  font-weight: lighter;
  padding: 20px 0;
}

#history {
  background: url("../../assets/img/img-01.jpg") no-repeat;
  background-size: cover;
  background-position: center;
}

#bg-section {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-color: rgba(41, 41, 41, 0.7);
}

#bg-section > div {
  max-width: 500px;
  padding: 20px;
}

.mark {
  padding: 40px;
  border-left: 1px solid var(--primary);
}

.mark:first-child {
  padding-top: 0;
}

.mark:last-child {
  padding-bottom: 0;
}

#history h3 {
  font-size: xx-large;
}

#history h3,
#history h4 {
  color: var(--primary);
  font-weight: lighter;
}

h2:not(#subtitle) {
  color: var(--primary);
  text-transform: uppercase;
  text-align: center;
  font-weight: lighter;
  padding-top: 20px;
  font-size: xx-large;
}

#map {
  width: 100%;
  height: 400px;
  padding: 20px;
}

#contact .link-button {
  padding: 10px;
  text-transform: uppercase;
}

#contact h3 {
  text-align: center;
  font-weight: lighter;
  padding: 10px;
}

#contact-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

@media screen and (max-width: 992px) {
  #bg-section {
    flex-direction: column;
  }
}

@media screen and (max-width: 576px) {
  #map {
    padding: 20px 0;
    height: 200px;
  }
}