* {
  box-sizing: border-box;
}
body {
  padding-top: var(--drupal-displace-offset-top, 0px);
  color: var(--color-text);
  overflow-x: hidden;
  font-family: var(--font-body);
  font-size: 16px;
  font-style: normal;
  line-height: 1.65;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-title);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: var(--heading-tracking);
}

button, input, select, textarea { font-family: var(--font-body); }

.site-layout {
  --site-content-width: 1480px;
  --site-content-padding: clamp(20px, 3vw, 40px);

  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--drupal-displace-offset-top, 0px));
  min-height: calc(100dvh - var(--drupal-displace-offset-top, 0px));

  > #main-content { flex: 1 0 auto; }
  > header, > footer { flex-shrink: 0; }

  .container {
    width: 100%;
    max-width: var(--site-content-width);
    margin-inline: auto;
    padding-inline: var(--site-content-padding);
  }
}

.page-title { font-size: clamp(32px, 4vw, 52px); }

#header-section .navbar-brand { font-family: var(--font-title); font-size: 24px; }

footer { font-size: 14px; line-height: 1.7; }

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


.merge-sizes {
  div:first-child {
    &:after {
      content: 'x';
      margin: 0 4px;
    }
  }
}

.full-width-section {
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  max-width: 1000% !important;
  width: auto !important;
}