html {
  box-sizing: border-box;
  font-size: 16px;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

/* prettier-ignore */
body, h1, h2, h3, h4, h5, h6, p, ol, ul {
  margin: 0;
  padding: 0;
  font-weight: normal;
}

/* prettier-ignore */
h1, h2, h3, h4, h5, h6, p, ol, ul {
  font-size: inherit;
}

/* prettier-ignore */
ol, ul {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
}

figure {
  margin: 0;
}

/* utilities */
.nowrap {
  white-space: nowrap;
}

/* sections */
/* 16px on 375px viewport gradually increasing to 100px on 1920px then centered */

:root {
  --typeScale-00: clamp(
    calc(13.33 / 16 * 1rem),
    0.28vw + 0.77rem,
    calc(17.6 / 16 * 1rem)
  );
  --typeScale-05: clamp(
    calc(14.61 / 16 * 1rem),
    0.33vw + 0.84rem,
    calc(19.68 / 16 * 1rem)
  );
  --typeScale-10: clamp(
    calc(16 / 16 * 1rem),
    0.39vw + 0.91rem,
    calc(22 / 16 * 1rem)
  );
  --typeScale-15: clamp(
    calc(17.53 / 16 * 1rem),
    0.46vw + 0.99rem,
    calc(24.6 / 16 * 1rem)
  );
  --typeScale-20: clamp(
    calc(19.2 / 16 * 1rem),
    0.54vw + 1.07rem,
    calc(27.5 / 16 * 1rem)
  );
  --typeScale-25: clamp(
    calc(21.03 / 16 * 1rem),
    0.63vw + 1.17rem,
    calc(30.75 / 16 * 1rem)
  );
  --typeScale-30: clamp(
    calc(23.04 / 16 * 1rem),
    0.73vw + 1.27rem,
    calc(34.38 / 16 * 1rem)
  );
  --typeScale-35: clamp(
    calc(25.24 / 16 * 1rem),
    0.85vw + 1.38rem,
    calc(38.43 / 16 * 1rem)
  );
  --typeScale-40: clamp(
    calc(27.65 / 16 * 1rem),
    0.99vw + 1.5rem,
    calc(42.97 / 16 * 1rem)
  );
  --typeScale-45: clamp(
    calc(30.29 / 16 * 1rem),
    1.15vw + 1.62rem,
    calc(48.04 / 16 * 1rem)
  );
  --typeScale-50: clamp(
    calc(33.18 / 16 * 1rem),
    1.33vw + 1.76rem,
    calc(53.71 / 16 * 1rem)
  );
  --typeScale-55: clamp(
    calc(36.34 / 16 * 1rem),
    1.53vw + 1.91rem,
    calc(60.05 / 16 * 1rem)
  );
  --typeScale-60: clamp(
    calc(39.81 / 16 * 1rem),
    1.77vw + 2.07rem,
    calc(67.14 / 16 * 1rem)
  );
  --centerAlign: calc((100vw - 120rem + 6.25rem * 2) / 2);
  --gradualHorisontalPadding: clamp(
    calc(16 / 16 * 1rem),
    5.44vw + -0.27rem,
    calc(100 / 16 * 1rem)
  );
  --gradualVerticalPaddingSmall: clamp(
    calc(16 / 16 * 1rem),
    0.26vw + 0.94rem,
    calc(20 / 16 * 1rem)
  );
  --gradualVerticalPaddingLarge: clamp(
    calc(16 / 16 * 1rem),
    1.55vw + 0.64rem,
    calc(40 / 16 * 1rem)
  );
}

/* colours */
:root {
  --crayola: #e2cf8a;
  --axelotl: #677263;
  --laurel: #aabc96;
  --swizzel: #f2f7dd;
  --aths: #e9e8c9;
  --darkgrey: #333;
}

body > :nth-child(1) {
  padding-inline: var(--gradualHorisontalPadding);
  padding-block: var(--gradualVerticalPaddingSmall);
  background-color: var(--crayola);
  color: var(--darkgrey);
}

body > :nth-child(2) {
  background-color: var(--axelotl);
  color: white;
}

body > :nth-child(n + 3),
body > :nth-child(2) > div {
  padding-inline: max(var(--centerAlign), var(--gradualHorisontalPadding));
  padding-block: var(--gradualVerticalPaddingLarge);
}

/* støttekonserter */
body > :nth-child(3) {
  background-color: var(--crayola);
  display: grid;
  grid-template-rows: auto;
  gap: var(--gradualVerticalPaddingLarge);
}

body > :nth-child(3) > div {
  display: grid;
  align-content: center;
}

body > :nth-child(3) img {
  border: 6px solid white;
}

@media (min-width: 800px) {
  body > :nth-child(3) {
    grid-template-columns: repeat(2, 1fr);
  }
  body > :nth-child(3) > div {
    grid-column: 1/2;
    grid-row: 1/1;
  }
  body > :nth-child(3) img {
    transform: rotate(2deg);
    box-shadow: 5px 5px 15px #0003;
    grid-column: 2/3;
    grid-row: 1/1;
  }
}

@media (min-width: 1024px) {
  body > :nth-child(3) {
    /* display: grid; */
  }
}

body > :nth-child(4) {
  background-color: var(--laurel);
}

body > :nth-child(5) {
  background-color: var(--swizzel);
}

body > :nth-child(6) {
  background-color: var(--aths);
}

@media (min-width: 1024px) {
  body > :nth-child(2) div {
    padding-left: calc(
      clamp(calc(51.28 / 16 * 1rem), 5.44vw + -0.09rem, calc(100 / 16 * 1rem)) /
        2
    );
  }
}

@media (min-width: 1024px) {
  body > :nth-child(2) {
    grid-template-columns: 618fr 382fr;
  }
}

body > :nth-child(2) {
  display: grid;
}

body > :nth-child(2) img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-height: 700px;
}

/* typography */
body {
  font-family: Overpass, sans-serif;
  font-size: var(--typeScale-10);
}

p {
  line-height: 1.5em;
}

* + p {
  margin-top: 0.7em;
}

h1 {
  font-size: var(--typeScale-50);
  line-height: 1.1em;
}

h2 {
  font-size: var(--typeScale-30);
  line-height: 1.1em;
}

body > div:nth-child(2) p {
  font-size: var(--typeScale-20);
  line-height: 1.3em;
}

/* component level layout */
@media (min-width: 1024px) {
  body > :nth-child(2) > div {
    display: grid;
    align-content: center;
  }
}

.tell-me-more-section {
  text-align: center;
}

.tell-me-more-section > *:nth-child(1) {
  margin-bottom: var(--gradualVerticalPaddingSmall);
}

.tell-me-more-section ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--gradualVerticalPaddingLarge);
}

.tell-me-more-section li {
  align: center;
}

.tell-me-more-section figure {
}

.tell-me-more-section img {
  width: 100%;
  height: auto;
  max-width: 300px;
}

.footer {
  padding-inline: var(--gradualHorisontalPadding);
  padding-block: var(--gradualVerticalPaddingSmall);
  font-size: var(--typeScale-00);
}

a:any-link {
  color: inherit;
  font-weight: 550;
}

/* debugging */
body > * + * {
  /* border-top: 10px solid lime; */
}