/* source-sans-3-200 - latin */
@font-face {
  font-display: swap;
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 200;
  src: url("../fonts/source-sans-3-v9-latin-200.woff2") format("woff2"), url("../fonts/source-sans-3-v9-latin-200.ttf") format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* source-sans-3-200italic - latin */
@font-face {
  font-display: swap;
  font-family: "Source Sans 3";
  font-style: italic;
  font-weight: 200;
  src: url("../fonts/source-sans-3-v9-latin-200italic.woff2") format("woff2"), url("../fonts/source-sans-3-v9-latin-200italic.ttf") format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* source-sans-3-300 - latin */
@font-face {
  font-display: swap;
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 300;
  src: url("../fonts/source-sans-3-v9-latin-300.woff2") format("woff2"), url("../fonts/source-sans-3-v9-latin-300.ttf") format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* source-sans-3-300italic - latin */
@font-face {
  font-display: swap;
  font-family: "Source Sans 3";
  font-style: italic;
  font-weight: 300;
  src: url("../fonts/source-sans-3-v9-latin-300italic.woff2") format("woff2"), url("../fonts/source-sans-3-v9-latin-300italic.ttf") format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* source-sans-3-regular - latin */
@font-face {
  font-display: swap;
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/source-sans-3-v9-latin-regular.woff2") format("woff2"), url("../fonts/source-sans-3-v9-latin-regular.ttf") format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* source-sans-3-italic - latin */
@font-face {
  font-display: swap;
  font-family: "Source Sans 3";
  font-style: italic;
  font-weight: 400;
  src: url("../fonts/source-sans-3-v9-latin-italic.woff2") format("woff2"), url("../fonts/source-sans-3-v9-latin-italic.ttf") format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* source-sans-3-500 - latin */
@font-face {
  font-display: swap;
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/source-sans-3-v9-latin-500.woff2") format("woff2"), url("../fonts/source-sans-3-v9-latin-500.ttf") format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* source-sans-3-500italic - latin */
@font-face {
  font-display: swap;
  font-family: "Source Sans 3";
  font-style: italic;
  font-weight: 500;
  src: url("../fonts/source-sans-3-v9-latin-500italic.woff2") format("woff2"), url("../fonts/source-sans-3-v9-latin-500italic.ttf") format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* source-sans-3-600 - latin */
@font-face {
  font-display: swap;
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 600;
  src: url("../fonts/source-sans-3-v9-latin-600.woff2") format("woff2"), url("../fonts/source-sans-3-v9-latin-600.ttf") format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* source-sans-3-600italic - latin */
@font-face {
  font-display: swap;
  font-family: "Source Sans 3";
  font-style: italic;
  font-weight: 600;
  src: url("../fonts/source-sans-3-v9-latin-600italic.woff2") format("woff2"), url("../fonts/source-sans-3-v9-latin-600italic.ttf") format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* source-sans-3-700 - latin */
@font-face {
  font-display: swap;
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/source-sans-3-v9-latin-700.woff2") format("woff2"), url("../fonts/source-sans-3-v9-latin-700.ttf") format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* source-sans-3-700italic - latin */
@font-face {
  font-display: swap;
  font-family: "Source Sans 3";
  font-style: italic;
  font-weight: 700;
  src: url("../fonts/source-sans-3-v9-latin-700italic.woff2") format("woff2"), url("../fonts/source-sans-3-v9-latin-700italic.ttf") format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* source-sans-3-800 - latin */
@font-face {
  font-display: swap;
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 800;
  src: url("../fonts/source-sans-3-v9-latin-800.woff2") format("woff2"), url("../fonts/source-sans-3-v9-latin-800.ttf") format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* source-sans-3-800italic - latin */
@font-face {
  font-display: swap;
  font-family: "Source Sans 3";
  font-style: italic;
  font-weight: 800;
  src: url("../fonts/source-sans-3-v9-latin-800italic.woff2") format("woff2"), url("../fonts/source-sans-3-v9-latin-800italic.ttf") format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* source-sans-3-900 - latin */
@font-face {
  font-display: swap;
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 900;
  src: url("../fonts/source-sans-3-v9-latin-900.woff2") format("woff2"), url("../fonts/source-sans-3-v9-latin-900.ttf") format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* source-sans-3-900italic - latin */
@font-face {
  font-display: swap;
  font-family: "Source Sans 3";
  font-style: italic;
  font-weight: 900;
  src: url("../fonts/source-sans-3-v9-latin-900italic.woff2") format("woff2"), url("../fonts/source-sans-3-v9-latin-900italic.ttf") format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* playfair-display-regular - latin */
@font-face {
  font-display: swap;
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/playfair-display-v36-latin-regular.woff2") format("woff2"), url("../fonts/playfair-display-v36-latin-regular.ttf") format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* playfair-display-italic - latin */
@font-face {
  font-display: swap;
  font-family: "Playfair Display";
  font-style: italic;
  font-weight: 400;
  src: url("../fonts/playfair-display-v36-latin-italic.woff2") format("woff2"), url("../fonts/playfair-display-v36-latin-italic.ttf") format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* playfair-display-500 - latin */
@font-face {
  font-display: swap;
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/playfair-display-v36-latin-500.woff2") format("woff2"), url("../fonts/playfair-display-v36-latin-500.ttf") format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* playfair-display-500italic - latin */
@font-face {
  font-display: swap;
  font-family: "Playfair Display";
  font-style: italic;
  font-weight: 500;
  src: url("../fonts/playfair-display-v36-latin-500italic.woff2") format("woff2"), url("../fonts/playfair-display-v36-latin-500italic.ttf") format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* playfair-display-600 - latin */
@font-face {
  font-display: swap;
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 600;
  src: url("../fonts/playfair-display-v36-latin-600.woff2") format("woff2"), url("../fonts/playfair-display-v36-latin-600.ttf") format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* playfair-display-600italic - latin */
@font-face {
  font-display: swap;
  font-family: "Playfair Display";
  font-style: italic;
  font-weight: 600;
  src: url("../fonts/playfair-display-v36-latin-600italic.woff2") format("woff2"), url("../fonts/playfair-display-v36-latin-600italic.ttf") format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* playfair-display-700 - latin */
@font-face {
  font-display: swap;
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/playfair-display-v36-latin-700.woff2") format("woff2"), url("../fonts/playfair-display-v36-latin-700.ttf") format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* playfair-display-700italic - latin */
@font-face {
  font-display: swap;
  font-family: "Playfair Display";
  font-style: italic;
  font-weight: 700;
  src: url("../fonts/playfair-display-v36-latin-700italic.woff2") format("woff2"), url("../fonts/playfair-display-v36-latin-700italic.ttf") format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* playfair-display-800 - latin */
@font-face {
  font-display: swap;
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 800;
  src: url("../fonts/playfair-display-v36-latin-800.woff2") format("woff2"), url("../fonts/playfair-display-v36-latin-800.ttf") format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* playfair-display-800italic - latin */
@font-face {
  font-display: swap;
  font-family: "Playfair Display";
  font-style: italic;
  font-weight: 800;
  src: url("../fonts/playfair-display-v36-latin-800italic.woff2") format("woff2"), url("../fonts/playfair-display-v36-latin-800italic.ttf") format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* playfair-display-900 - latin */
@font-face {
  font-display: swap;
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 900;
  src: url("../fonts/playfair-display-v36-latin-900.woff2") format("woff2"), url("../fonts/playfair-display-v36-latin-900.ttf") format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* playfair-display-900italic - latin */
@font-face {
  font-display: swap;
  font-family: "Playfair Display";
  font-style: italic;
  font-weight: 900;
  src: url("../fonts/playfair-display-v36-latin-900italic.woff2") format("woff2"), url("../fonts/playfair-display-v36-latin-900italic.ttf") format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* sacramento-regular - latin */
/* fuggles-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Fuggles";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/fuggles-v12-latin-regular.woff2") format("woff2"), url("../fonts/fuggles-v12-latin-regular.ttf") format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* sacramento-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Sacramento";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/sacramento-v15-latin-regular.woff2") format("woff2"), url("../fonts/sacramento-v15-latin-regular.ttf") format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
.content-grid {
  --padding-inline: 1rem;
  --content-max-width: 900px;
  --breakout-max-width: 1200px;
  --breakout-size: calc(
          (var(--breakout-max-width) - var(--content-max-width)) / 2
  );
  display: grid;
  grid-template-columns: [full-width-start] minmax(var(--padding-inline), 1fr) [breakout-start] minmax(0, var(--breakout-size)) [content-start] min(100% - var(--padding-inline) * 2, var(--content-max-width)) [content-end] minmax(0, var(--breakout-size)) [breakout-end] minmax(var(--padding-inline), 1fr) [full-width-end];
}

.content-grid > :not(.breakout, .full-width),
.full-width > :not(.breakout, .full-width) {
  grid-column: content;
}

.content-grid > .breakout {
  grid-column: breakout;
}

.content-grid > .full-width {
  grid-column: full-width;
  display: grid;
  grid-template-columns: inherit;
}
.content-grid > .full-width .teaser-1 {
  display: grid;
  grid-column: inherit;
  grid-template-columns: 33fr 66fr;
}

img.full-width {
  width: 100%;
  max-height: 45vh;
  object-fit: cover;
}

:root {
  --color-scheme: light;
  --font-family: system-ui;
  --ff-text: "Source Sans 3";
  --ff-heading-1: "Playfair Display";
  --ff-heading-2: "Sacramento";
  --fw-regular: 300;
  --fw-bold: 700;
  --fw-semi-bold: 400;
  /* @link https://utopia.fyi/type/calculator?c=320,20,1.2,1680,32,1.25,6,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
  --step--1: clamp(0.7231rem, 0.6524rem + 0.3537vw, 1.0238rem);
  --step-0: clamp(0.8681rem, 0.7712rem + 0.4846vw, 1.28rem);
  --step-1: clamp(1.0419rem, 0.9106rem + 0.6566vw, 1.6rem);
  --step-2: clamp(1.25rem, 1.0735rem + 0.8824vw, 2rem);
  --step-3: clamp(1.5rem, 1.2647rem + 1.1765vw, 2.5rem);
  --step-4: clamp(1.8rem, 1.4882rem + 1.5588vw, 3.125rem);
  --step-5: clamp(2.16rem, 1.7491rem + 2.0544vw, 3.9063rem);
  --step-6: clamp(2.5919rem, 2.0528rem + 2.6956vw, 4.8831rem);
  --step-7: clamp(3.1106rem, 2.4064rem + 3.5213vw, 6.1038rem);
  --step-8: clamp(3.7325rem, 2.8156rem + 4.5846vw, 7.6294rem);
  --fc-text: hsl(0, 0%, 24%, 1.0);
  --fc-text-inverted: hsl(0, 0%, 100%, 1.0);
  --clr-primary: hsl(47, 59%, 85%, 1.0);
  --clr-secondary: hsl(160, 25%, 76%, 1.0);
  --clr-tertiary: hsl(283, 69%, 77%, 1.0);
  --clr-accent-primary: hsl(46, 100%, 37%, 1.0);
  --clr-accent-secondary: hsl(160, 100%, 25%, 1.0);
  --clr-accent-tertiary: hsl(283, 100%, 33%, 1.0);
  --clr-white: #ffffff;
  --clr-grey-100: #2f2f2f;
  --clr-grey-200: #3b3b3b;
  --clr-grey-300: #5a5a5a;
  --clr-grey-400: #6e6e6e;
  --clr-grey-500: #7c7c7c;
  --clr-grey-600: #b4b4b4;
  --clr-grey-700: #c3c3c3;
  --clr-grey-800: #d8d8d8;
  --clr-grey-900: #efefef;
}

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

html {
  color-scheme: var(--color-scheme);
}

body {
  margin: 0;
  font-family: var(--font-family);
  font-size: var(--step--0);
  line-height: 1.6;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
figure {
  margin: 0;
}

p {
  padding-bottom: 1em;
}

img {
  max-width: 100%;
  display: block;
}

.section-title h2, .section-title h3, .section-title h4, .section-title h5 {
  font-family: var(--ff-heading-1);
  font-size: var(--step-4);
  line-height: 1.1;
}
.section-title h2 span, .section-title h3 span, .section-title h4 span, .section-title h5 span {
  font-family: var(--ff-heading-2);
  font-size: var(--step-7);
  position: relative;
  top: 30px;
  z-index: 5;
}
.section-title .sub {
  font-family: var(--ff-heading-1);
  font-size: var(--step-1);
  z-index: 9;
}

.bg-primary {
  background: var(--clr-primary);
}
.bg-primary .section-title span {
  color: var(--clr-accent-primary);
}

.bg-secondary {
  background: var(--clr-secondary);
}
.bg-secondary .section-title span {
  color: var(--clr-accent-secondary);
}

.bg-tertiary {
  background: var(--clr-tertiary);
}
.bg-tertiary .section-title span {
  color: var(--clr-accent-tertiary);
}

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.call-to-action {
  padding: 1rem;
  background: hsla(0, 0%, 100%, 0.15);
}

.flow > * + * {
  /* margin-top: var(--flow-spacing, 1em); */
}

.section-padding {
  padding-block: 2.5rem;
}

.even-columns {
  display: flex;
  gap: 1rem;
}

.text--center {
  display: block;
  text-align: center;
}

.padding-horizontal {
  padding: 0 3em;
}

.footer__layout {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: minmax(200px, 1fr) 200px 200px;
}

.logo {
  max-width: 250px;
}

.primary-header {
  background: var(--clr-primary);
  color: var(--fc-text);
}

.primary-header__layout {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

nav ul {
  font-family: var(--ff-heading-1);
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: max(5vw, 1rem);
}

nav a {
  color: inherit;
  text-decoration: none;
}

nav a:hover,
nav a:focus {
  color: var(--clr-accent);
  text-decoration: underline;
}

.portfolio ul {
  list-style: none;
  margin: 0;
}

.portfolio__flexbox-grid {
  --min: 10ch;
  --gap: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
}

.portfolio__flexbox-grid > * {
  flex: 1 1 var(--min);
}

.portfolio__flexbox-grid .topic {
  display: block;
  margin: 0px auto;
  position: relative;
  top: -11px;
  text-align: center;
}
.portfolio__flexbox-grid .topic span {
  font-family: var(--ff-heading-1);
  background-color: var(--clr-primary);
  color: var(--fc-text);
  padding: 0.5em 2em;
}

.footer {
  background: var(--clr-grey-100);
  padding: 50px 40px 30px;
}
.footer .footer_menu {
  max-width: 1000px;
  width: 100%;
  display: flex;
  margin: 0 auto 25px;
  justify-content: space-between;
}
.footer .footer_menu .title {
  margin-bottom: 5px;
  padding-left: 5px;
  border-bottom: 1px solid var(--clr-grey-200);
  color: var(--clr-grey-500);
  font-family: var(--ff-heading-1);
  font-weight: var(--fw-bold);
}
.footer .footer_menu ul {
  list-style-type: none;
  padding-left: 0;
}
.footer .footer_menu ul li a {
  display: block;
  margin-bottom: 6px;
  color: var(--clr-grey-400);
  text-decoration: none;
}
.footer .footer_menu ul li a:hover {
  color: var(--clr-primary);
}

@media (max-width: 768px) {
  .footer .footer_menu {
    flex-direction: column;
    width: 220px;
    margin: 0 auto 25px;
  }
  .footer .footer_menu > div {
    margin: 10px 0;
  }
}
.footer__logotext {
  color: var(--clr-grey-300);
  font-size: var(--step--1);
}

.teaser-1 {
  display: flex;
  justify-content: start;
  align-items: center;
}

/*# sourceMappingURL=styles.css.map */