:root {
  --c-black: #2B2B2B;
  --c-white: #ffffff;
  --c-grey-75: #5B5B5B;
  --c-grey-60: #717070;
  --c-grey-50: #8B8B8B;
  --c-grey-35: #B7B7B7;
  --c-grey-15: #DDDDDD;
  --c-grey-02: #fafafa;
  --cbrand-greybackground: #F4F4F4;
  --cbrand-greyyellow: #D0CDC5;
  --cbrand-greyblue: #C2C7C6;
  --cbrand-greyred: #D9D5D5;
  --cbrand-accent: #FDC63D;
  /* --cbrand-accent: #EB990E; */

  --spacing-0125: 0.125rem;
  --spacing-025: 0.25rem;
  --spacing-050: 0.5rem;
  --spacing-075: 0.75rem;
  --spacing-100: 1rem;
  --spacing-125: 1.25rem;
  --spacing-150: 1.5rem;
  --spacing-175: 1.75rem;
  --spacing-200: 2rem;
  --spacing-250: 2.5rem;
  --spacing-350: 3.5rem;
  --spacing-400: 4rem;
  --spacing-500: 5rem;
  --spacing-700: 7rem;

  --radius-050: 8px;
  --radius-100: 16px; 
  --radius-200: 24px;
  --radius-300: 50px;
  --radius-400: 100px;
  --radius-500: 200px;
  --radius-700: 350px; 
  
  --borderradius-xxs: var(--radius-050);
  --borderradius-xs: var(--radius-100);
  --borderradius-s: var(--radius-200);
  --borderradius-m: var(--radius-300);
  --borderradius-l: var(--radius-400);
  --borderradius-ll: var(--radius-500);
  --borderradius-xl: var(--radius-700);

  --fontfamily-primary: "Crimson Pro", serif;
  --fontfamily-secondary: "Open Sans", sans-serif;

  --fontfamily-body: var(--fontfamily-secondary);
  --fontfamily-heading: var(--fontfamily-primary);

  --fontweight-200: 200;
  --fontweight-300: 300;
  --fontweight-400: 400;
  --fontweight-500: 500;
  --fontweight-600: 600;
  --fontweight-700: 700;
  --fontweight-800: 800;

  --fontsize-050: 0.5rem;
  --fontsize-075: 0.75rem;
  --fontsize-085: 0.875rem;
  --fontsize-100: 1rem;
  --fontsize-200: 1.25rem;
  --fontsize-250: 1.5rem;
  --fontsize-300: 1.75rem;
  --fontsize-400: 2.3125rem;
  --fontsize-500: 3.125rem;
  --fontsize-600: 5.5625rem;

  --font-weight-extrathin: var(--fontweight-200);
  --font-weight-thin: var(--fontweight-300);
  --font-weight-regular: var(--fontweight-400);
  --font-weight-medium: var(--fontweight-500);
  --font-weight-semibold: var(--fontweight-600);
  --font-weight-bold: var(--fontweight-600);
  --font-weight-extrabold: var(--fontweight-800);

  --font-size-label-s: var(--fontsize-050);
  --font-size-label: var(--fontsize-085);
  --font-size-body: var(--fontsize-100);
  --font-size-bodydisplay: var(--fontsize-200);
  --font-size-secondary-subtitle: var(--fontsize-300);
  --font-size-primary-subtitle: var(--fontsize-400);
  --font-size-title: var(--fontsize-500);
  --font-size-display: var(--fontsize-600);

  --transition: 380ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* reset */
*, *::before, *::after {
    box-sizing: border-box;
  }
  * {
    margin: 0;
    padding: 0;
    color: var(--c-black);
  }
  body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }
  img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
  }
  input, button, textarea, select {
    font: inherit;
  }
  p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
  }
  #root, #__next {
    isolation: isolate;
  }
  ul, li {
    list-style: none;
  } 
  a {
    text-decoration: none;
  }

/* utility clases */

.foreground-c-black { 
  color: var(--c-black);
}
.foreground-c-white { 
  color: var(--c-white);
}
.foreground-c-grey75 { 
  color: var(--c-grey-75);
}
.foreground-c-grey50 { 
  color: var(--c-grey-50);
}
.foreground-c-grey35 { 
  color: var(--c-grey-35);
}
.foreground-c-grey15 { 
  color: var(--c-grey-15);
}
.foreground-c-accent { 
  color: var(--cbrand-accent);
}

.background-c-black { 
  background-color: var(--c-black);
}
.background-c-white { 
  background-color: var(--c-white);
}
.background-c-grey75 { 
  background-color: var(--c-grey-75);
}
.background-c-grey50 { 
  background-color: var(--c-grey-50);
}
.background-c-grey35 { 
  background-color: var(--c-grey-35);
}
.background-c-grey15 { 
  background-color: var(--c-grey-15);
}
.background-c-grey02 { 
  background-color: var(--c-grey-02);
}
.background-c-grey-yellow { 
  background-color: var(--cbrand-greyyellow);
}
.background-c-grey-red { 
  background-color: var(--cbrand-greyred);
}
.background-c-grey-blue { 
  background-color: var(--cbrand-greyblue);
}



/* general */
body {
  background-color: var(--cbrand-greybackground);
}
/* text */

/* a:hover {
  color: var(--cbrand-accent);
} */

/* li a:hover {
  color: var(--cbrand-accent);
} */

.display {
  font-family: var(--fontfamily-heading);
  font-size: var(--font-size-display);
  font-weight: var(--font-weight-extrathin);
  hyphens: auto;
  font-style: normal;
  line-height: 73%;
}

.title {
  font-family: var(--fontfamily-heading);
  font-size: var(--font-size-title);
  font-weight: var(--font-weight-medium);
  font-style: normal;
  line-height: 82%;
  hyphens: auto;
}
.subtitle-primary {
  font-family: var(--fontfamily-heading);
  font-size: var(--font-size-primary-subtitle);
  font-weight: var(--font-weight-thin);
  font-style: normal;
  line-height: 110%;
  hyphens: auto;
}
.subtitle-secondary {
  font-family: var(--fontfamily-heading);
  font-size: var(--font-size-secondary-subtitle);
  font-weight: var(--font-weight-semibold);
  font-style: normal;
  line-height: 110%;
  hyphens: auto;
}
.bodydisplay {
  font-family: var(--fontfamily-body);
  font-size: var(--font-size-bodydisplay);
  font-weight: var(--font-weight-semibold);
  font-style: normal;
  line-height: 130%;
  hyphens: auto;
}
.body {
  font-family: var(--fontfamily-body);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  font-style: normal;
  line-height: 150%;
  hyphens: auto;
}

.label {
  font-family: var(--fontfamily-body);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-thin);
  font-style: normal;
  line-height: 130%; 
  hyphens: auto;
}

.label-italic {
  font-family: var(--fontfamily-body);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-thin);
  font-style: italic;
  line-height: 130%; 
  hyphens: auto;
}
.label-s {
  font-family: var(--fontfamily-body);
  font-size: var(--fontsize-075);
  font-weight: var(--font-weight-thin);
  font-style: normal;
  line-height: 130%; 
  hyphens: auto;
}
.label-s-italic {
  font-family: var(--fontfamily-body);
  font-size: var(--fontsize-075);
  font-weight: var(--font-weight-thin);
  font-style: italic;
  line-height: 130%; 
  hyphens: auto;
}
.normal-list {
  padding: 0;
}

.normal-list li {
  font-family: var(--fontfamily-body);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  font-style: normal;
  line-height: 130%;
  hyphens: auto;
  color: var(--c-black);
}

.bulleted-list {
  padding: 0 0 0 1.5rem;
}

.bulleted-list li {
  margin-top: 0.5rem;
  font-family: var(--fontfamily-body);
  font-size: var(--font-size-bodydisplay);
  font-weight: var(--font-weight-semibold);
  font-style: normal;
  line-height: 110%;
  hyphens: auto;
  color: var(--c-grey-50);
  list-style:disc;
}

.horizontal-list {
  padding: 0 0 0 1.5rem;
}

.horizontal-list li {
  display: inline-block;
  font-family: var(--fontfamily-body);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  font-style: normal;
  line-height: 130%;
  hyphens: auto;
  color: var(--c-black);
  list-style: circle;
  margin-right: 3rem;
}

.horizontal-list li:before{
  content: "";
  display: list-item;
  position: absolute;
}

/* Effects */

.boxshadow-one {
  box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.25) inset;
  z-index: 100;
}

/* elements */

.subtitle-line {
  width: 8.5rem;
  height: 0.125rem;
  background-color: var(--c-grey-75)
}

.line-up-fill {
  width: 0.125rem;
  height: 12rem;
  background-color: var(--c-grey-75);
}

.line-up-small {
  width: 0.125rem;
  height: 2rem;
  background-color: var(--c-grey-50);
}
/* Images */

.icon-32 {
  width: 2rem;
  height: auto;
}
.icon-20 {
  width: 1.25rem;
  height: auto;
}
.icon-16 {
  width: 1rem;
  height: auto;
}
.logo-50 {
  width: auto;
  height: 50%;
}
.img-roundcorner-s {
  border-radius: var(--borderradius-xs);
}
.img-insideframe {
  object-fit: cover;
  width: 100%;
  height: 100%;
  z-index: -100;
}
.img-frame {
  width: 100%;
  height: 100%;
}
.img-frame-horizontal {
  width: 100%;
  height: auto;
}
.img-frame-vertical {
  width: auto;
  height: 100%;
}
.img-frame-vertical-l {
  width: auto;
  height: 32rem;
}
.img-frame-fit {
  width: auto;
  height: fit-content;
}
.img-frame-roundtop-l {
  border-radius: var(--borderradius-l) var(--borderradius-l) 0 0;
}
.img-frame-roundtop-xl {
  border-radius: var(--borderradius-xl) var(--borderradius-xl) 0 0;
}
.img-frame-rounddown-xl {
  border-radius: 0 0 var(--borderradius-xl) var(--borderradius-xl);
}
.img-fame-round-left {
  border-radius: var(--borderradius-m) 0 0 var(--borderradius-m);
}
.img-fame-round-right {
  border-radius: 0 var(--borderradius-m) var(--borderradius-m) 0;
}
.img-frame-roundoposite-right {
  border-radius: 0 var(--borderradius-m);
}
.img-frame-roundoposite-left {
  border-radius: var(--borderradius-m) 0;
}
.img-frame-roundoposite-left-l {
  border-radius: var(--borderradius-l) 0;
}
.img-frame-round-leftup {
  border-radius: var(--borderradius-m) 0 0 0;
}
.img-frame-round-leftup-ll {
  border-radius: var(--borderradius-ll) 0 0 0;
}
.img-frame-round-leftdown {
  border-radius: 0 0 0 var(--borderradius-l);
}
.img-frame-round-rightup-l {
  border-radius: 0 var(--borderradius-l) 0 0;
}

/* layout */
.container {
  padding: 8rem 15rem 0 15rem;
  max-width: 1920px;
  margin-inline: auto;
}
.content {
  padding: 7rem 0 0 0;
}
/* Flexboxes */
.flex-general {
  display: flex;
}
.flex-column {
  flex-direction: column;
}
.flex-justify-center {
  justify-content: center;
}
.flex-justify-right {
   justify-content: end;
}
.flex-align-center {
  align-items: center;
}
.flex-align-left {
  justify-content: left;
}
.flex-align-right {
  justify-content: end;
}
.flex-align-start {
  align-items: start;
}
.paragraph-one {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-250);
}
.icon-n-text {
  display: flex;
  align-items: center;
  gap: var(--spacing-125);
}
.flex-auto {
  display: flex;
  justify-content: space-between;
}

.flex-400 {
  display: flex;
  gap: var(--spacing-400);
}

.flex-350 {
  display: flex;
  gap: var(--spacing-350);
}

.flex-250 {
  display: flex;
  gap: var(--spacing-250);
}

.flex-200 {
  display: flex;
  gap: var(--spacing-200);
}

.flex-150 {
  display: flex;
  gap: var(--spacing-150);
}

.flex-125 {
  display: flex;
  gap: var(--spacing-125);
}

.flex-100 {
  display: flex;
  gap: var(--spacing-100);
}

.flex-075 {
  display: flex;
  gap: var(--spacing-075);
}

.flex-050 {
  display: flex;
  gap: var(--spacing-050);
}

/* General Grids */
.content-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: max-content;
  gap: 1.5rem;
}
.grid-3 {
  grid-column:  span 3;
}
.grid-4 { 
  grid-column: span 4;
}
.grid-4-left {
  grid-column: 2 / 6;
}
.grid-4-right {
  grid-column: 8 / 12;
}
.grid-5-right {
  grid-column: 8 / 13;
}
.grid-5-right-edge {
  grid-column: 8 / 13;
}
.grid-5-left {
  grid-column: span 5;
}
.grid-6-left {
  grid-column: span 6;
}
.grid-6-right {
  grid-column: 7 / 13;
}
.grid-6-center {
  grid-column: 4 / 10;
}
.grid-7-right {
  grid-column: 6 / 13;
}
.grid-8-right {
  grid-column: 6 / 13;
}
.grid-10-center {
  grid-column: 2 / 12;
}
.grid-fullrow {
  grid-column: span 12;
}
/* alignment */

.align-right {
  margin-left: auto;
}
/* espacing */
.spacedown-125 {
  margin-bottom: var(--spacing-125);
}
.spacedown-350{
  margin-bottom: var(--spacing-350);
}
.spacedown-500{
  margin-bottom: var(--spacing-500);
}
.spacedown-700{
  margin-bottom: var(--spacing-700);
}

/* Titles */
.title-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}
.title-layout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1.5rem;
}
.title-line {
  width: var(--spacing-250);
  height: var(--spacing-0125);
  background-color: var(--c-grey-75);
}
.main-title-line {
  width: 10vw;
  height: var(--spacing-0125);
  background-color: var(--c-grey-75);
}
/* Buttons */

button {
  font-family: var(--fontfamily-body);
  font-size: var(--font-size-bodydisplay);
  font-weight: 700;
  font-style: normal;
  line-height: 110%;
  hyphens: auto;
  cursor: pointer;
}
.primary-button {
  width: fit-content;
  background-color: var(--cbrand-accent);
  padding: var(--spacing-075) var(--spacing-150);
  border: none;
  border-radius: 0 18px 14px 18px;
  justify-content: center;
  align-items: center; 
}
.primary-button a {
  color: var(--c-black);
}

.primary-button:hover {
  background-color: var(--cbrand-greyyellow);
}
.secondary-button {
  position: relative;
  z-index: 2;
  width: fit-content;
  background-color: var(--cbrand-greyyellow);
  padding: var(--spacing-075) var(--spacing-150);
  border: 2px solid var(--c-white);
  border-radius: 0 18px 14px 18px;
  color: var(--c-black)
}
.secondary-button:hover {
  background-color: var(--cbrand-accent);
}
/* header */
header {
  position: fixed;
  z-index: 999;
  width: 100%;
  padding: 1rem 7.5rem;
  background-color: var(--c-white);
  box-shadow: 0 4px 8px 0 rgba(43, 43, 43, 0.15);
}
.header-layout {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header-layout > nav {
  position: absolute;
  left:50%;
  transform:translateX(-50%);
}
.nav-title {
  font-family: var(--fontfamily-heading);
  font-size: var(--font-size-bodydisplay);
  font-weight: var(--font-weight-semibold);
  font-style: normal;
  line-height: 110%;
  hyphens: auto;
}
.nav-title:hover {
  text-decoration: underline;
} 
.social-header {
display: flex;
gap: 1rem;
padding: 0, var(--spacing-050);
}
.social-brand {
  display: flex;
  gap: 0.25rem;
  align-items: center;
  justify-content: center;
}
.social-brand:hover {
  text-decoration: underline;
}
.horizontal-list-nav {
  padding: 0;
  display: flex;
  flex-direction: row;
}
.horizontal-list-nav li {
  font-family: var(--fontfamily-body);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  font-style: normal;
  line-height: 130%;
  hyphens: auto;
  color: var(--c-black);
  padding: var(--spacing-050) var(--spacing-100) ;
}
.horizontal-list-nav li:hover {
  background-color: var(--cbrand-accent);
  border-radius: 32px;
}
.vertical-list-nav {
  padding: 0;
}
.vertical-list-nav li {
  font-family: var(--fontfamily-body);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  font-style: normal;
  line-height: 130%;
  hyphens: auto;
  color: var(--c-black);
}
.menu-button {
  display: none;
}
.sidebar {
  position: fixed;
  top: 0;
  right: 0;
  height: auto;
  width: 50vw;
  z-index: 999;
  background-color: var(--c-grey-15);
  border-radius: 0 0 0 var(--borderradius-m);
  display: none;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 1rem 0;
}
.sidebar li{
  display: inline-block;
}
.sidebar li:not(:first-child) {
  padding: 1rem 0;
}
/* HeroHome */

.container-hero {
  padding: 7rem 15rem 2.3rem 15rem;
}

.hero-layout {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(3, max-content);
  grid-template-areas: 
    "l n n n n n n n n n n n"
    "l t t t t t t t t i i i"
    "l v v v v v . . . . . ."
  ;
}

.hero-gallery-line {
  grid-area: l;
}
.hero-gallery-name {
  grid-area: n;
}
.hero-gallery-title {
  grid-area: t;
}
.hero-gallery-value {
  grid-area: v;
}
.hero-gallery-image {
  grid-area: i;
}
.hero-line {
  width: 0.125rem;
  height: 28rem;
  background-color: var(--c-grey-75);
}
/* gallery home */
/* .gallery-home {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(3, minmax(18rem, 1fr));
  grid-template-areas: 
    "a a a b b b b c c c"
    "d d d d e e e f f f" 
    "g g g h h h h i i i"
  ;
}
.home-gallery-one {
  grid-area: a;
}
.home-gallery-two {
  grid-area: b;
}
.home-gallery-three {
  grid-area: c;
}
.home-gallery-four {
  grid-area: d;
}
.home-gallery-five {
  grid-area: e;
}
.home-gallery-six {
  grid-area: f;
}
.home-gallery-seven {
  grid-area: g;
}
.home-gallery-eight {
  grid-area: h;
}
.home-gallery-nine {
  grid-area: i;
} */
/* breadcrumb */
.container-bread {
  padding: 2.5rem 7.5rem;
  max-width: 1920px;
  margin-inline: auto;
}
.horizontal-list-bread {
  padding: 0;
}
.horizontal-list-bread li {
  display: inline-block;
  font-family: var(--fontfamily-body);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  font-style: normal;
  line-height: 130%;
  hyphens: auto;
  text-align: center;
  color: var(--c-grey-50);
  list-style: none; 
  margin: 0 0.75rem;
}
/* Headline */

.headline-container {
  padding: 8rem 15rem 0 15rem;
}
.headline-layout {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(2, max-content);
  grid-template-areas: 
    "l . . . . . . . i i i i"
    "l t t t t t t t i i i i"
  ;
}
.headline-01 {
  grid-area: l;
}
.headline-02 {
  grid-area: t;
}
.headline-03 {
  grid-area: i;
}
.line-headline {
  width: 0.125rem;
  height: 14rem;
  background-color: var(--c-grey-75);
}

/* new inteernal  */

.headline-internal {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: min(2rem, 8rem);
}
.headline-internal > h1 {
  font-family: var(--fontfamily-heading);
  font-size: var(--font-size-display);
  font-weight: 200;
  color: var(--c-black) ;
  white-space: nowrap;
}
/* Cards */


/* CTA */
.cta-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-075);
}
.cta-container > h4 {
  text-align: center;
}

/* Portfolio */

.portfolio-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-250);
}

.portfolio-wrapper:last-child {
  background-color: red;
  justify-content: center
}

/* Casos de estudio */

/* Tarjeta home */
.cs-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-100);
  border-radius: var(--borderradius-xs);
  overflow: hidden;
  background-color: var(--c-grey-02);
  border: 2px solid var(--c-grey-15);
  box-shadow: -6px 8px 16px 0 rgba(0, 0, 0, 0.12);
}

.cs-card-img {
  position: relative;
  overflow: hidden;
}

.cs-card-img img {
  width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
} 

.cs-card-content {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  align-self: stretch;
  padding: var(--spacing-100) var(--spacing-100) var(--spacing-100) var(--spacing-200);
  gap: var(--spacing-100);
}

.cs-card-content > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-150);
  align-self: stretch;
}
.cs-card-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-025);
}
.cs-card-title p {
  font-family: var(--fontfamily-primary);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  font-style: normal;
  line-height: 100%;
  color: var(--c-black);
}
.cs-card-title h3 {
  font-family: var(--fontfamily-body);
  font-size: var(--fontsize-300);
  font-weight: var(--fontweight-300);
  font-style: normal;
  line-height: 120%;
  color: var(--c-grey-75);
}

.cs-card-tags {
  display: flex;
  flex-direction: column;
}

.cs-card-tags span {
  font-family: var(--fontfamily-body);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-regular);
  font-style: normal;
  line-height: 130%;
  text-transform: capitalize;
  color: var(--c-grey-60);
}
/* portfolio Gallery */

.home-gallery-container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-200);
}
/* .home-gallery-container > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
} */
/* .home-gallery-rowtwo {
  flex: 1 1 30%;
} */
.gallery__item {
  flex: 1 1 30%;
  border-radius: var(--borderradius-xs);
  box-shadow: -6px 8px 16px 0 rgba(0, 0, 0, 0.12);
  overflow: hidden;
}

.gallery__item-l {
  flex: 1 1 50%;
  border-radius: var(--borderradius-xs);
  box-shadow: -6px 8px 16px 0 rgba(0, 0, 0, 0.12);
  overflow: hidden;
}

.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.home-gallery-img-square {
  aspect-ratio: 1 / 1;
}
.home-gallery-img-vertical {
  aspect-ratio: 4 / 5;
}




/* old */

.gallery-port {
  display: grid;
  gap: 1.5rem;
  grid-auto-rows: minmax(18rem, 1fr);
  grid-auto-flow: dense;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
}
.gallery-span {
  grid-column: span 2;
}
.gallery-item {
  background-color: var(--c-grey-15);
  padding: 0.5rem;
  border-radius: var(--borderradius-xs);
  display: none;
}
.show {
  display: block;
}
.port-button {
  cursor: pointer;
}
.port-button:hover {
  color: var(--cbrand-accent);
}
/* case studies content grid */
.cs-grid-one {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 0.5fr 1.2fr;
  grid-template-areas: 
  "x x x x x . . z z z z z"
  ". y y y y y . z z z z z"
  ;
}
.cs-grid-01 {
  grid-area: x;
}
.cs-grid-02 {
  grid-area: y;
}
.cs-grid-03 {
  grid-area: z;
}

/* footer */
.footer-container {
  padding: 1.5rem 0;
  background-color: var(--c-grey-15);
  margin-top: var(--spacing-400);
}

.footer-content {
  padding: 0 7.5rem;
  max-width: 1920px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-075);
}
.footer-content > div:first-child {
  display: flex;
  justify-content: space-between;
  
} 

.footer-logo {
  display: flex;
  align-items: center;
  gap: var(--spacing-025);
  white-space: nowrap;
}
.footer-logo span {
  font-family: var(--fontfamily-heading);
  font-size: var(--fontsize-300);
  font-weight: var(--font-weight-medium);
  font-style: normal;
  line-height: 82%;
  hyphens: auto;
}
.footer-info {
  display: flex;
  gap: var(--spacing-400);
  align-items: start;
}
.horizontal-list-nav-footer {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-050);
  line-height: 100%;
}

.horizontal-list-nav-footer li {
  white-space: nowrap;
  height: auto;
}

.horizontal-list-nav-footer >li a {
  font-family: var(--fontfamily-body);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-thin);
  font-style: normal;
  line-height: 100%; 
  hyphens: auto;
}
.horizontal-list-nav-footer >li a:hover {
  text-decoration: underline;
}
.footer-social-wrapper {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: var(--spacing-100);
}
.footer-social {
  font-family: var(--fontfamily-body);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-thin);
  font-style: normal;
  line-height: 130%; 
  hyphens: auto;
} 
/* .footerlist li {
  float: right;
  font-family: var(--fontfamily-body);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-thin);
  font-style: normal;
  line-height: 130%; 
  hyphens: auto;
  color: var(--c-black);
  margin-left: 1.5rem;
} */

/* 404 */
.notfound-container {
  height: 100vh;
  width: auto;
}
.notfound-item {
  position: absolute;
  top: 50%;
  right: 50%;
  margin-top: -50px;
    margin-left: -70px;
}


/* Media Querries */
@media(max-width: 1280px) {
  .container {
    padding: 6rem 8rem 0 8rem;
  }
  .headline-container {
    padding: 6rem 8rem 0 8rem;
  }
  .container-hero {
    padding: 5.5rem 5rem 1.5rem 5rem;
  }
  .hero-layout {
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(4, max-content);
    grid-template-areas: 
    ". n n n n n n n"
    "l t t t t t t t"
    "l v v v v i i i"
    "l v v v v i i i"
  ;
  }
  .social-header {
    flex-direction: column;
    align-items: start;
    gap: var(--spacing-025);
  }
}
@media(max-width: 880px) {
  header {
    padding: 1rem 2rem;
  }
  .header-layout > nav {
    position: relative;
    left: auto;
    transform: none;
  }
  .hideonmobile {
    display: none;
  }
  .menu-button {
    display: block;
  }
  .container {
    padding: 6rem 3rem 0 3rem;
  }
  .content {
    padding: 5rem 0 0 0;
  }
  .content-grid {
    grid-template-columns: repeat(8, 1fr);
  }
  .grid-4-left {
    grid-column: span 4;
  }
  .grid-4-right {
    grid-column: 6 / 9;
  }
  .grid-5-right {
    grid-column: 5 / 9;
  }
  .grid-5-right-edge {
    grid-column: 5 / 9;
  }
  .grid-5-left {
    grid-column: -9 / -5;
  }
  .grid-6-left {
    grid-column: span 5;
  }
  .grid-6-right {
    grid-column: 5 / 9;
  }
  .grid-6-center {
    grid-column: 2 / 8;
  }
  .grid-7-right {
    grid-column: span 6;
  }
  .grid-8-right {
    grid-column: span 8;
  }
  .grid-10-center {
    grid-column: span 8;
  }
  .grid-fullrow {
    grid-column: span 8;
  }
  .container-hero {
    padding: 6rem 3rem 1.5rem 3rem;
  }
  .gallery-home {
    gap: 1rem;
    grid-template-rows: repeat(3, minmax(12rem, 1fr));
  }
  .container-bread {
    padding: 2rem 5rem;
  }
  .horizontal-list-bread li {
    margin: 0 0.5rem;
  }
  .headline-container {
    padding: 6rem 5rem 0 5rem;
  }
  .headline-internal > h1 {
    font-size: var(--font-size-title);
  }
  .headline-layout {
    grid-template-columns: repeat(8, 1fr);
    grid-template-areas: 
    "l t t t t t t t"
    "l . . . . i i i"
  ;
  }
  .cs-grid-one {
    grid-template-columns: repeat(8, 1fr);
    grid-template-areas: 
    "x x x . . z z z"
    ". y y y . z z z"
  }
  .footer-container {
    padding: 1rem 0;
  }
  .footer-content {
    padding: 0 3rem;
    align-items: center;
    gap: var(--spacing-200);
  }
  .footer-content > div:first-child {
    flex-direction: column;
    gap: var(--spacing-200);
    align-items: center;
  }
  .footer-social-wrapper {
    flex-direction: row;
    gap: var(--spacing-200);
  }
  .footer-logo span {
    font-size: var(--fontsize-300);
  }
  .footer-info {
    flex-direction: column;
    gap: var(--spacing-200);
    align-items: center;
  }
  .horizontal-list-nav-footer {
    flex-direction: row;
    gap: var(--spacing-200);
  }
}
@media all and (max-width: 480px) {
  :root {
    --font-size-label: var(--fontsize-075);
    --font-size-body: var(--fontsize-085);
    --font-size-bodydisplay: var(--fontsize-100);
    --font-size-secondary-subtitle: var(--fontsize-200);
    --font-size-primary-subtitle: var(--fontsize-300);
    --font-size-title: var(--fontsize-400);
    --font-size-display: var(--fontsize-500);
  }
  header {
    padding: 1rem 2.5rem;
  }
  .container {
    padding: 3rem 2.5rem;
    padding: 3rem 2.5rem 0 2.5rem;
  }
  .content {
    padding: 3rem 0 0 0;
  }
  .flex-400 {
    gap: var(--spacing-350);
  }
  .flex-350 {
    gap: var(--spacing-250);
  }
  .flex-250 {
    gap: var(--spacing-200);
  }
  .flex-200 {
    gap: var(--spacing-175);
  }
  .flex-150 {
    gap: var(--spacing-125);
  }
  .flex-125 {
    gap: var(--spacing-100);
  }
  .flex-100 {
    gap: var(--spacing-075);
  }
  .flex-075 {
    gap: var(--spacing-050);
  }
  .content-grid {
    grid-template-columns: repeat(5, 1fr);
  }
  .grid-3 {
    grid-column:  span 4;
  }
  .grid-4 {
    grid-column: span 5;
  }
  .grid-4-left {
    grid-column: span 5;
  }
  .grid-4-right {
    grid-column: span 5;
  }
  .grid-5-right {
    grid-column: span 5;
  }
  .grid-5-right-edge {
    grid-column: span 5;
  }
  .grid-5-left {
    grid-column: span 5;
  }
  .grid-6-left {
    grid-column: span 5;
  }
  .grid-6-right {
    grid-column: span 5;
  }
  .grid-6-center {
    grid-column: span 5;
  }
  .grid-7-right {
    grid-column: span 5;
  }
  .grid-10-center {
    grid-column: span 5;
  }
  .grid-fullrow {
    grid-column: span 5;
  }
  .container-hero {
    padding: 4.5rem 2.5rem 1rem 2.5rem;
  }
  .hero-layout {
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(4, max-content);
    grid-template-areas: 
    "n n n n n"
    "t t t t t"
    "t t t t t"
    "v v v v v"
  ;
  }
  .hero-gallery-line {
    display: none;
  }
  .hero-gallery-image {
    display: none;
  }
  .gallery-home {
    gap: 1rem;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(9, minmax(16rem, 1fr));
    grid-template-areas: 
    "a a a a a"
    "b b b b b"
    "c c c c c"
    "d d d d d"
    "e e e e e"
    "f f f f f"
    "g g g g g"
    "h h h h h"
    "i i i i i"
  ;
  }
  .cs-grid-one {
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(3, max-content);
    grid-template-areas: 
    "x x x x x"
    "y y y y y"
    "z z z z z"
  }
  .container-bread {
    padding: 1.5rem 2.5rem;
  }
  .horizontal-list-bread li {
    margin: 0 0.125rem;
  }
  .headline-container {
    padding: 6rem 2.5rem 0 2.5rem;
  }
  .headline-layout {
    grid-template-columns: repeat(5, 1fr);
    grid-template-areas: 
    "t t t t t"
    "i i i i i"
  ;
  }
  .headline-01 {
    display: none;
  }
  .gallery-port {
    grid-template-columns: 1fr;
  }
  .gallery-span {
    grid-column: span 1;
  }
  .footer-content {
    padding: 0 2.5rem;
  }

}