* {
  margin: 0;
  padding: 0;
}

:root {
  --font-family-sans: Inter, Roboto, "Helvetica Neue", "Arial Nova",
    "Nimbus Sans", Arial, sans-serif;
  --font-family-serif: "Iowan Old Style", "Palatino Linotype", "URW Palladio L",
    P052, serif;

  --default-font-size: 1rem;
  --container-width: 1440px;
  --gutter: 20px;
  --outer-spacing: var(--gutter);
  --color-primary: #335555;
}

.much-text {
  --default-font-size: 0.875rem;
}

@media screen and (min-width: 540px) {
  :root {
    --outer-spacing: calc(var(--gutter) * 2);
  }
}

@media screen and (min-width: 740px) {
  :root {
    --default-font-size: 1.5rem;
  }
  .much-text {
    --default-font-size: 1rem;
  }
}

html {
  height: 100%;
}

body {
  font-family: var(--font-family-sans);
  color: var(--color-primary);
  line-height: 1.4;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-family-serif);
  margin-bottom: 0.75em;
  line-height: 1;
  hyphens: auto;
}

:is(h1, h2, h3, h4, h5, h6):not(:first-child) {
  margin-top: 1.5em;
}

:is(h1, h2, h3, h4, h5, h6) small {
  text-transform: none;
  display: block;
  font-size: calc(var(--default-font-size) * 0.75);
  font-family: var(--font-family-sans);
  font-weight: 300;
  margin-top: 0.75em;
  letter-spacing: 0.2em;
  hyphens: none;
}

h1 {
  font-size: calc(var(--default-font-size) * 2.8);
  text-transform: uppercase;
}
h1 a:hover,
h1 a:focus {
  text-decoration: none;
}
h2 {
  text-transform: uppercase;
}
h2,
h3,
h4 {
  font-size: calc(var(--default-font-size) * 1.5);
}
h5,
h6 {
  font-size: calc(var(--default-font-size) * 1.2);
}

p,
ul {
  font-size: var(--default-font-size);
  margin-bottom: 0.75em;
  font-weight: 300;
}
ul {
  padding-left: 2em;
}
ul li {
  margin-bottom: 0.2em;
}

a {
  text-decoration: none;
  color: inherit;
}
a:hover,
a:focus {
  text-decoration: underline;
}

main {
  flex: 1;
}

.container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  max-width: var(--container-width);
  padding-left: var(--outer-spacing);
  padding-right: var(--outer-spacing);
  margin-left: auto;
  margin-right: auto;
  gap: var(--gutter);
}

footer ul {
  list-style: none;
  display: flex;
  grid-column: 1/13;
  justify-content: flex-end;
  gap: var(--gutter);
  padding-bottom: var(--gutter);
}
footer ul li {
  font-size: calc(var(--default-font-size) * 0.75);
}

.box_outer {
  grid-column: 1/13;
  background: rgba(255, 255, 255, 0.82);
  padding: var(--outer-spacing) 0 var(--outer-spacing) var(--outer-spacing);
  position: relative;
  margin-top: var(--outer-spacing);
}
@media screen and (min-width: 740px) {
  .box_outer {
    padding: calc(1 / 12 * 100%) 0 0 calc(1 / 12 * 100%);
  }
}

@media screen and (min-width: 1025px) {
  .box_outer {
    grid-column: 3/11;
    padding: calc(1 / 10 * 100%) 0 0 calc(1 / 8 * 100%);
  }
  .box_outer:not(.-collapse) {
    margin-top: 10vw;
  }
}

.box_outer .bg {
  height: calc(100% - 60px);
  object-fit: cover;
  width: calc(10 / 12 * 100%);
  position: absolute;
  top: calc(var(--outer-spacing) * -1);
  left: calc(var(--outer-spacing) * -1);
  z-index: -1;
}

@media screen and (min-width: 540px) {
  .box_outer .bg {
    width: calc(6 / 12 * 100%);
  }
}

@media screen and (min-width: 1025px) {
  .box_outer .bg {
    top: -5vw;
    width: calc(3 / 8 * 100%);
    left: calc(-1 / 8 * 100%);
  }
}

.box_inner {
  background: white;
  padding: var(--gutter);
}
@media screen and (min-width: 740px) {
  .box_inner {
    padding: calc(1 / 14 * 100%) calc(1 / 12 * 100%);
  }
}