@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
:root {
  --column-gap: 10px;
  --row-gap: 0px;
  --menu-height: 90px;
}
@media (min-width: 768px) {
  :root {
    --menu-height: 75px;
  }
}

[data-grid=grid-template] {
  display: grid;
  gap: var(--row-gap) var(--column-gap);
  grid-template-columns: [full-start] minmax(1.3vw, 1fr) [main-start] repeat(4, minmax(0, 100px)) [main-end] minmax(1.3vw, 1fr) [full-end];
  grid-template-rows: auto;
  grid-template-areas: ". left left left left ." ". right right right right .";
}
@media (min-width: 480px) {
  [data-grid=grid-template] {
    grid-template-columns: [full-start] minmax(1.3vw, 1fr) [main-start] repeat(6, minmax(0, 100px)) [main-end] minmax(1.3vw, 1fr) [full-end];
    grid-template-areas: ". left left left left left left ." ". right right right right right right .";
  }
}
@media (min-width: 768px) {
  [data-grid=grid-template] {
    grid-template-columns: [full-start] minmax(1.3vw, 1fr) [main-start] repeat(12, minmax(0, 100px)) [main-end] minmax(1.3vw, 1fr) [full-end];
    grid-template-areas: ". left left left left left left right right right right right right .";
  }
}
@media (min-width: 1280px) {
  [data-grid=grid-template] {
    grid-template-columns: [full-start] minmax(7vw, 1fr) [main-start] repeat(20, minmax(0, 65px)) [main-end] minmax(7vw, 1fr) [full-end];
    grid-template-areas: ". left left left left left left left left left left right right right right right right right right right right .";
  }
}

[data-column=full] {
  grid-column: full;
}

[data-column=main] {
  grid-column: main;
}

[data-column=left] {
  grid-column: left;
}

[data-column=right] {
  grid-column: right;
}

[data-column=span-4] {
  grid-column: main;
}
@media (min-width: 768px) {
  [data-column=span-4] {
    grid-column: span 4;
  }
  [data-column=span-4]:nth-of-type(3n-2) {
    grid-column-start: 2;
    grid-column-end: span 4;
  }
}
@media (min-width: 1280px) {
  [data-column=span-4]:nth-of-type(3n-2) {
    grid-column-start: auto;
  }
  [data-column=span-4]:nth-of-type(5n-4) {
    grid-column-start: 2;
    grid-column-end: span 4;
  }
}

/************** MAIN COLORS ***********/
[data-color=cloud] {
  background-color: #F8F8F8;
}

[data-color=ridge] {
  background-color: #E8E8E8;
}

[data-color=zinc] {
  background-color: #D0D0D0;
}

[data-color=metal] {
  background-color: #353535;
}

[data-color=ink] {
  background-color: #262626;
}

[data-color=pitch] {
  background-color: #040606;
}

* {
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Open Sans", sans-serif;
  font-size: 1.8rem;
  line-height: 1.8;
  color: #121212;
  background: #E0E0DB;
}

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

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

section {
  margin: 6rem 0;
}
@media (min-width: 1280px) {
  section {
    margin: 12rem 0;
  }
}
section:first-child {
  margin-top: 10rem;
}
@media (min-width: 1280px) {
  section:first-child {
    margin-top: 14rem;
  }
}
section:last-child {
  margin-bottom: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.siteHeader {
  background: #E0E0DB;
  align-items: center;
}

.siteHeader__image {
  grid-area: left;
  overflow: hidden;
}

.siteHeader__content {
  display: grid;
  gap: 2rem;
  grid-column: main;
  margin-top: 2.4rem;
}
@media (min-width: 768px) {
  .siteHeader__content {
    margin-top: 0;
    grid-column: 9/-2;
  }
}
@media (min-width: 1280px) {
  .siteHeader__content {
    grid-column: 13/-2;
  }
}

.siteHeader__text {
  font-size: 1.8rem;
  line-height: 1.8;
  color: #111111;
}
.siteHeader__text p:last-child {
  margin-bottom: 0;
}

.siteHeader__body {
  margin-top: 2rem;
}

.siteWork {
  background: #d35b00;
  padding: 6rem 0;
}
@media (min-width: 1280px) {
  .siteWork {
    padding: 12rem 0;
  }
}

.siteWork__items {
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 12rem;
  row-gap: 8rem;
}

.siteWork__item {
  color: #ffffff;
  transition: opacity 0.2s ease-out;
}

.siteWork__items:has(.siteWork__item-link:hover) .siteWork__item,
.siteWork__items:has(.siteWork__item-link:focus) .siteWork__item {
  opacity: 0.5;
}

.siteWork__items:has(.siteWork__item-link:hover) .siteWork__item:has(.siteWork__item-link:hover),
.siteWork__items:has(.siteWork__item-link:focus) .siteWork__item:has(.siteWork__item-link:focus) {
  opacity: 1;
}

.siteWork__item-link {
  color: inherit;
  text-decoration: none;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.siteWork__item-link > * {
  margin: 0 !important;
}

.siteWork__item-link:hover,
.siteWork__item-link:focus {
  background: transparent;
}

.siteWork__item-link::after {
  content: "";
  position: absolute;
  top: 1rem;
  right: 0rem;
  width: 1.6rem;
  height: 1.6rem;
  background: url("images/diagonal-arrow-white.svg") center center no-repeat;
  background-size: contain;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.2s ease-out;
  transform: translate(-5px, 5px);
}

.siteWork__item-link:hover::after,
.siteWork__item-link:focus::after {
  opacity: 1;
  transform: translate(0, 0);
}

.siteWork__item h2 {
  font-size: 2.6rem;
  line-height: 1.2;
  font-weight: 600;
}

.siteWork__subtitle {
  font-size: 1.6rem;
}

.siteWork__description {
  font-size: 1.6rem;
  line-height: 1.9;
}

@media (max-width: 991px) {
  .siteWork__items {
    grid-template-columns: 1fr;
  }
}
.brandHeader {
  margin: 0 auto;
  padding: 3rem 2rem 0;
  height: var(--menu-height);
  position: absolute;
  top: 0;
}

.brandHeader__title {
  color: #d35b00;
  font-size: 2.4rem;
  font-weight: 600;
  letter-spacing: 0.1em;
}

.siteFooter {
  margin: 0 auto;
  padding: 4rem 0;
  background: #E0E0DB;
}
@media (min-width: 992px) {
  .siteFooter {
    padding: 10rem 0 4rem 0;
  }
}

.siteFooter__items {
  grid-column: main;
  display: grid;
  gap: 2rem;
}

.siteFooter__links {
  display: grid;
  gap: 1rem;
}

.siteFooter__link {
  color: #d35b00;
  font-weight: 600;
  display: block;
  position: relative;
  width: fit-content;
  transition: opacity 0.2s ease-out;
}
.siteFooter__link::after {
  content: "";
  position: absolute;
  top: 1.1rem;
  right: -1.6rem;
  width: 1rem;
  height: 1rem;
  background-size: contain;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.2s ease-out;
  transform: translate(-3px, 3px);
}
.siteFooter__link:hover::after, .siteFooter__link:focus::after {
  opacity: 1;
  transform: translate(0, 0);
}

.siteFooter__links:has(.siteFooter__link:hover) .siteFooter__link {
  opacity: 0.5;
}

.siteFooter__links:has(.siteFooter__link:hover) .siteFooter__link:hover {
  opacity: 1;
}

@media (max-width: 640px) {
  .brandHeader {
    padding: 2rem 1.5rem 0;
  }
}