.foobar {
  margin: var(--offset-y) auto;
  max-width: 1440px;
}

.foobar__headline {
  text-align: center;
  font-weight: bold;
}

h3.foobar__headline {
  font: var(--grande);
}

h4.foobar__headline {
  font: var(--tall);
}

.foobar__wrapper {
  display: grid;
  padding: 0 var(--offset-x);
}

@media (min-width: 1280px) {
  .foobar__wrapper {
    grid-gap: 110px;
    grid-template-columns: 1fr minmax(432px, 0.37fr);
  }

  .foobar--reversed .foobar__wrapper {
    grid-template-columns: minmax(432px, 0.37fr) 1fr;
  }
}

@media (min-width: 1025px) and (max-width: 1280px) {
  .foobar__wrapper {
    grid-gap: 110px;
    grid-template-columns: 1fr 0.37fr;
  }

  .foobar--reversed .foobar__wrapper {
    grid-template-columns: 0.37fr 1fr;
  }
}

@media (max-width: 1024px) {
  .foobar__wrapper {
    grid-gap: 50px;
    grid-template-columns: 1fr;
  }
}

.bar__headline {
  font-size: 24px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 40px;
}

.foobar--reversed .bar__foo {
  height: fit-content;
  padding: 35px;
  background-color: var(--background);
}

.foo__bar {
  font: var(--tall);
}

.foo__bar strong {
  font-weight: 600 !important;
}

.foo__bar a {
  text-decoration: underline;
}

.foo__bar em {
  font-style: italic;
}

.foo__bar p {
  margin: 2.5rem 0;
}

.foo__bar p:first-child {
  margin-top: 0;
}

.foo__bar p:last-child {
  margin-bottom: 0;
}