:root {
  --inset--100: -12px;
  --inset--200: -24px;
  --inset--300: -36px;
  --inset--400: -48px;
  --inset--500: -60px;
  --inset-100: 12px;
  --inset-200: 24px;
  --inset-300: 36px;
  --inset-400: 48px;
  --inset-500: 60px;
}

:root {
  --color-stone-gray: #6d6960;
  --color-dark-tan: #988256;
  --gradient-black-to-white: linear-gradient(
  	180deg,
  	hsl(0deg 0% 0%) 0%,
  	hsl(339deg 0% 0%) 4%,
  	hsl(339deg 0% 0%) 8%,
  	hsl(339deg 0% 0%) 13%,
  	hsl(339deg 0% 0%) 17%,
  	hsl(339deg 0% 0%) 21%,
  	hsl(339deg 0% 0%) 25%,
  	hsl(339deg 0% 0%) 29%,
  	hsl(339deg 0% 0%) 33%,
  	hsl(339deg 0% 0%) 37%,
  	hsl(339deg 0% 0%) 42%,
  	hsl(339deg 0% 0%) 46%,
  	hsl(0deg 0% 0%) 50%,
  	hsl(343deg 0% 9%) 54%,
  	hsl(344deg 0% 16%) 58%,
  	hsl(344deg 0% 23%) 63%,
  	hsl(344deg 0% 31%) 67%,
  	hsl(344deg 0% 39%) 71%,
  	hsl(344deg 0% 47%) 75%,
  	hsl(344deg 0% 55%) 79%,
  	hsl(344deg 0% 64%) 83%,
  	hsl(344deg 0% 72%) 87%,
  	hsl(344deg 0% 81%) 92%,
  	hsl(344deg 0% 91%) 96%,
  	hsl(0deg 0% 100%) 100%
  );
  --shadow-color: 0deg 0% 57%;
  --shadow-elevation-200: 0.4px 0.5px 0.6px hsl(var(--shadow-color) / 0.54),
  	0.7px 0.8px 1.1px -1.7px hsl(var(--shadow-color) / 0.45),
  	1.7px 2px 2.6px -3.4px hsl(var(--shadow-color) / 0.35);
  --shadow-elevation-400: 0.4px 0.5px 0.6px hsl(var(--shadow-color) / 0.57),
  	1.2px 1.3px 1.8px -1.1px hsl(var(--shadow-color) / 0.5),
  	3.3px 3.9px 5.1px -2.3px hsl(var(--shadow-color) / 0.42),
  	8.7px 10.2px 13.3px -3.4px hsl(var(--shadow-color) / 0.34);
  --shadow-elevation-600: 0.4px 0.5px 0.6px hsl(var(--shadow-color) / 0.47),
  	1.7px 2px 2.6px -0.4px hsl(var(--shadow-color) / 0.44),
  	3.2px 3.8px 4.9px -0.8px hsl(var(--shadow-color) / 0.42),
  	5.5px 6.4px 8.4px -1.3px hsl(var(--shadow-color) / 0.39),
  	9px 10.5px 13.7px -1.7px hsl(var(--shadow-color) / 0.36),
  	14.4px 16.8px 21.9px -2.1px hsl(var(--shadow-color) / 0.33),
  	22.1px 25.8px 33.6px -2.6px hsl(var(--shadow-color) / 0.31),
  	32.8px 38.2px 49.8px -3px hsl(var(--shadow-color) / 0.28),
  	46.9px 54.7px 71.3px -3.4px hsl(var(--shadow-color) / 0.25);
  --radius-200: 12px;
  --radius-400: 24px;
  --radius-800: 48px;
}

img,
video {
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
  max-width: 100%;
  height: auto;
}

main section {
  padding-block: var(--inset-500);
}

h1, h2, h3, h4, h5, h6 {
  word-break: break-word;
}

.section__title {
  margin-bottom: var(--inset-200);
}

/* Fluid Typography with CSS clamp() */
:root {
  /* Font Family */
  --font-family: "Roboto Condensed", sans-serif;
  --font-family-display: "Lexend Giga", sans-serif;
  --font-size-100: clamp(1rem, 0vw + 1rem, 1rem);
  --font-size-200: clamp(1.13rem, 0.2vw + 1.09rem, 1.25rem);
  --font-size-300: clamp(1.19rem, 0.6vw + 1.07rem, 1.56rem);
  --font-size-400: clamp(1.25rem, 1.2vw + 1.01rem, 2rem);
  --font-size-500: clamp(1.38rem, 1.8vw + 1.02rem, 2.5rem);
  --font-size-600: clamp(1.56rem, 2.6vw + 1.04rem, 3.19rem);
  --font-size-700: clamp(1.94rem, 3.3vw + 1.28rem, 4rem);
  --font-size-800: clamp(2.19rem, 4.6vw + 1.27rem, 5.06rem);
  --font-size-900: clamp(2.44rem, 6.3vw + 1.18rem, 6.38rem);
  --line-height-100: 1.5;
  --line-height-400: 1.2;
  --line-height-700: 1;
  --letter-spacing-010: 0.15em;
  --letter-spacing-100: 0.035em;
  --letter-spacing-400: 0.0025em;
  --letter-spacing-800: -0.0172em;
}

/*
15 - nav
16 - section body

19 - secton header
20 - footer content
20 - promo content

22 - subtitle
23 - section content
28 - section content

34 - title intro
35 - footer heading

41 - section title
42 - promo bottom

58 - promo title

62 - section title
66 - title

79 - section title

115 - number
*/
body,
.style--body-md {
  font-family: var(--font-family);
  font-size: var(--font-size-100);
  font-weight: 400;
  line-height: var(--line-height-100);
  letter-spacing: var(--letter-spacing-100);
}

.style--body-lg {
  font-family: var(--font-family);
  font-size: var(--font-size-200);
  font-weight: 400;
  line-height: var(--line-height-100);
  letter-spacing: var(--letter-spacing-100);
}

h6,
.style--title-sm {
  font-family: var(--font-family);
  font-size: var(--font-size-200);
  font-weight: 600;
  line-height: var(--line-height-100);
  letter-spacing: var(--letter-spacing-100);
}

h5,
.style--title-md {
  font-family: var(--font-family);
  font-size: var(--font-size-300);
  font-weight: 600;
  line-height: var(--line-height-100);
  letter-spacing: var(--letter-spacing-100);
}

h4,
.style--title-lg {
  font-family: var(--font-family);
  font-size: var(--font-size-400);
  font-weight: 600;
  line-height: var(--line-height-400);
  letter-spacing: var(--letter-spacing-400);
}

h3,
.style--heading-sm {
  font-family: var(--font-family);
  font-size: var(--font-size-400);
  font-weight: 600;
  line-height: var(--line-height-400);
  letter-spacing: var(--letter-spacing-400);
}

h2,
.style--heading-md {
  font-family: var(--font-family);
  font-size: var(--font-size-600);
  font-weight: 600;
  line-height: var(--line-height-400);
  letter-spacing: var(--letter-spacing-400);
}

h1,
.style--heading-lg {
  font-family: var(--font-family);
  font-size: var(--font-size-700);
  font-weight: 600;
  line-height: var(--line-height-700);
  letter-spacing: var(--letter-spacing-700);
}

.style--display-sm {
  font-family: var(--font-family-display);
  font-size: var(--font-size-300);
  font-weight: 200;
  line-height: var(--line-height-100);
  letter-spacing: var(--letter-spacing-100);
}

.style--display-md {
  font-family: var(--font-family-display);
  font-size: var(--font-size-700);
  font-weight: 200;
  line-height: var(--line-height-700);
  letter-spacing: var(--letter-spacing-700);
}

.style--display-lg {
  font-family: var(--font-family-display);
  font-size: var(--font-size-800);
  font-weight: 200;
  line-height: var(--line-height-700);
  letter-spacing: var(--letter-spacing-010);
}

:root {
  --mask-button-background: #000;
  --mask-button-foreground: #fff;
  --mask-button-background-hover: #fff;
  --mask-button-foreground-hover: #000;
}

@keyframes button-mask-in {
  from {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
  to {
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
  }
}
@keyframes button-mask-out {
  from {
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
  }
  to {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
}
.button--mask {
  display: inline-grid;
  grid-template: "container" 1fr;
  overflow: hidden;
  border-radius: 99px;
  margin-inline: auto;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  font-family: var(--font-family-display);
  font-size: var(--font-size-400);
  font-weight: 800;
  line-height: var(--line-height-100);
  letter-spacing: var(--letter-spacing-100);
  box-shadow: var(--shadow-elevation-400);
  cursor: pointer;
}
.button--mask::before, .button--mask::after {
  display: grid;
  grid-area: container;
  place-items: center;
  padding: var(--inset-100) var(--inset-200);
  content: attr(aria-label);
}
.button--mask::before {
  overflow: hidden;
  background-color: var(--mask-button-background-hover);
  color: var(--mask-button-foreground-hover);
}
.button--mask::after {
  background-color: var(--mask-button-background);
  color: var(--mask-button-foreground);
  -webkit-mask: url("https://raw.githubusercontent.com/pizza3/asset/master/natureSmaller.png");
          mask: url("https://raw.githubusercontent.com/pizza3/asset/master/natureSmaller.png");
  -webkit-mask-size: 7100% 100%;
          mask-size: 7100% 100%;
  animation: button-mask-out 0.5s steps(70) forwards;
}
.button--mask:hover::after {
  animation: button-mask-in 0.5s steps(70) forwards;
}

.button--small {
  font-size: var(--font-size-300);
}

#hero {
  position: relative;
  z-index: 0;
  display: grid;
  grid-template-rows: auto 1fr;
  color: #fff;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("../img/hero/hero-400w.webp");
  min-height: min(1400px, 100vh);
}
@media (min-width: 992px) {
  #hero {
    max-height: none;
    min-height: min(56.25vw, 100vh);
  }
}
#hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: rgba(0, 0, 0, 0.45);
  background-image: linear-gradient(transparent calc(100% - 100px), #000);
}
@media (min-width: 576px) {
  #hero {
    background-image: url("../img/hero/hero-600w.webp");
  }
}
@media (min-width: 768px) {
  #hero {
    background-image: url("../img/hero/hero-800w.webp");
  }
}
@media (min-width: 992px) {
  #hero {
    background-image: url("../img/hero/hero-1200w.webp");
  }
}
@media (min-width: 1200px) {
  #hero {
    background-image: url("../img/hero/hero-1600w.webp");
  }
}
#hero .hero__nav {
  flex-wrap: nowrap;
  align-items: start;
}
#hero .hero__nav .hero__logo {
  flex-shrink: 0;
}
#hero .hero__nav .nav {
  align-self: center;
}
#hero .hero__nav .nav .dropdown-menu {
  left: auto;
  right: 0;
}
#hero .hero__nav .nav .dropdown-toggle {
  padding: 0;
}
#hero .hero__nav .nav .dropdown-toggle svg {
  height: 2em;
  width: 2em;
  padding: 0;
}
#hero .hero__nav .nav .dropdown-toggle::after {
  display: none;
}
#hero .hero__nav .nav__item {
  display: none;
}
#hero .hero__nav .nav__item.item--mobile {
  display: block;
}
@media (min-width: 992px) {
  #hero .hero__nav .nav__item {
    display: block;
  }
  #hero .hero__nav .nav__item.item--mobile {
    display: none;
  }
}
#hero .hero__nav a {
  color: inherit;
  font-weight: 600;
  text-align: right;
}
#hero .hero__nav a:hover {
  text-decoration: underline;
}
#hero .hero__cta-container {
  display: grid;
  align-items: center;
}
#hero .hero__cta {
  display: grid;
  justify-items: center;
  padding-block: var(--inset-500);
  text-align: center;
  text-shadow: 1px 1px 10px #000;
  word-break: break-word;
}
#hero .hero__cta .cta__accent {
  display: grid;
  width: calc(100% - var(--inset-500) * 2);
  max-width: 650px;
  height: 100%;
  min-height: 100px;
  padding-block: var(--inset-300);
  padding-inline: var(--inset-100);
  border: 5px solid #fff;
}
@media (min-width: 992px) {
  #hero .hero__cta .cta__accent {
    min-height: 150px;
  }
}
#hero .hero__cta .cta__accent.accent--top {
  align-items: end;
  padding-bottom: var(--inset-100);
  border-bottom: 0;
}
#hero .hero__cta .cta__accent.accent--bottom {
  align-items: start;
  padding-top: var(--inset-100);
  border-top: 0;
}
#hero .hero__cta .cta__intro,
#hero .hero__cta .cta__title,
#hero .hero__cta .cta__subtitle {
  margin: 0;
}
#hero .hero__cta .cta__intro {
  display: block;
}
#hero .hero__cta .cta__title {
  margin-block: var(--inset-100);
  text-transform: uppercase;
}

#why-glaciers-matter {
  position: relative;
  z-index: 0;
  padding-bottom: 0;
  background-color: #000;
  color: #fff;
  font-family: var(--font-family);
  font-size: var(--font-size-300);
  font-weight: 400;
  line-height: var(--line-height-100);
  letter-spacing: var(--letter-spacing-100);
}
#why-glaciers-matter .section__graphics {
  position: relative;
  z-index: -1;
  background-image: var(--gradient-black-to-white);
  width: 100%;
  overflow: hidden;
}
#why-glaciers-matter .section__graphics .graphic--birds-front {
  right: 0;
  width: 33%;
  max-width: 325px;
  margin: 0 0 0 auto;
}
#why-glaciers-matter .section__graphics .graphic--birds-back {
  display: none;
}
#why-glaciers-matter .section__graphics .graphic--mountain-front {
  margin-top: -2%;
  margin-left: -340px;
  max-width: 150%;
}
#why-glaciers-matter .section__graphics .graphic--mountain-back {
  margin-left: auto;
  margin-right: -250px;
  max-width: 125%;
  scale: -0.9 0.9;
}
@media (min-width: 768px) {
  #why-glaciers-matter .section__graphics .graphic--mountain-front {
    margin-left: -540px;
  }
  #why-glaciers-matter .section__graphics .graphic--mountain-back {
    margin-right: -400px;
  }
}
@media (min-width: 992px) {
  #why-glaciers-matter .section__graphics .graphic--mountain-back {
    margin-top: -500px;
  }
}

#what-we-do .section__promos {
  display: grid;
  gap: var(--inset-200);
}
#what-we-do .section__promos .promo {
  display: grid;
  gap: var(--inset-100);
  align-items: start;
}
#what-we-do .section__promos .promo .promo__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1280/720;
  background: #e0e0e0;
  box-shadow: var(--shadow-elevation-400);
  overflow: hidden;
  order: -1;
  z-index: -1;
}
#what-we-do .section__promos .promo .promo__media img,
#what-we-do .section__promos .promo .promo__media video {
  position: absolute;
  height: 100%;
  width: 100%;
}
#what-we-do .section__promos .promo video {
  display: none;
}
@media (min-width: 992px) {
  #what-we-do .section__promos {
    gap: 0;
  }
  #what-we-do .section__promos .promo {
    gap: var(--inset-200);
    grid-template-columns: 50% auto;
    align-items: center;
  }
  #what-we-do .section__promos .promo .promo__content {
    padding-block: var(--inset-100);
  }
  #what-we-do .section__promos .promo:nth-child(odd) {
    grid-template-columns: auto 50%;
  }
  #what-we-do .section__promos .promo:nth-child(odd) .promo__media {
    order: 1;
  }
}

#where-we-work {
  background-color: #000;
  color: #fff;
  font-family: var(--font-family);
  font-size: var(--font-size-200);
  font-weight: 400;
  line-height: var(--line-height-100);
  letter-spacing: var(--letter-spacing-100);
}
#where-we-work .section__map {
  display: grid;
  gap: var(--inset-200);
  margin-top: var(--inset-500);
}
#where-we-work .section__map .map__legend {
  display: flex;
  flex-flow: row wrap;
  justify-items: center;
  justify-content: center;
  gap: 0 var(--inset-300);
  order: 2;
  margin: 0;
  padding: 0 var(--inset-200) var(--inset-200);
}
#where-we-work .section__map img {
  padding-top: var(--inset-100);
}
@media (min-width: 992px) {
  #where-we-work .section__map {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--inset-500);
  }
  #where-we-work .section__map .map__legend {
    display: grid;
    grid-template-columns: 1fr 1fr;
    white-space: nowrap;
    order: 0;
    justify-items: start;
  }
}

#priorities {
  padding-top: 0;
  text-align: center;
}
#priorities .section__title_container {
  text-transform: uppercase;
  padding: var(--inset-200) 0;
}
#priorities .section__title_container .section__title {
  margin: 0;
}
@media (min-width: 992px) {
  #priorities .section__title_container {
    background-color: #000;
    color: #fff;
    padding: var(--inset-400) 0 0;
  }
  #priorities .section__title_container .section__title {
    margin: 0;
    padding-bottom: var(--inset-400);
  }
}
#priorities .section__title {
  font-weight: 700;
  font-family: var(--font-family-display);
  font-size: var(--font-size-800);
  font-weight: 700;
  line-height: var(--line-height-700);
  letter-spacing: 0;
}
@media (min-width: 768px) {
  #priorities .section__title {
    font-size: var(--font-size-800);
  }
}
#priorities .section__priorities {
  display: grid;
  gap: var(--inset-200);
}
@media (min-width: 992px) {
  #priorities .section__priorities {
    padding-top: var(--inset-500);
    gap: var(--inset-500);
  }
}
#priorities .priorities__item {
  position: relative;
  max-width: 800px;
  display: grid;
  place-items: end;
}
#priorities .priorities__item > * {
  grid-area: 1/-1;
}
#priorities .priorities__item::before {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(transparent 25%, rgba(0, 0, 0, 0.5));
  text-shadow: 1px 1px 10px #000;
  content: "";
}
#priorities .priorities__item img {
  position: relative;
  box-shadow: var(--shadow-elevation-400);
  z-index: -1;
}
#priorities .priorities__item .priority__content {
  display: grid;
  gap: var(--inset-100);
  grid-template-columns: 1fr auto;
  place-items: center;
  padding: var(--inset-100);
  text-shadow: 0px 0px 6px black;
  color: white;
  text-align: left;
  font-family: var(--font-family);
  font-size: var(--font-size-400);
  font-weight: 700;
  line-height: var(--line-height-400);
  letter-spacing: var(--letter-spacing-400);
}
#priorities .priorities__item .priority__num {
  position: relative;
  align-self: start;
  font-family: var(--font-family);
  font-size: var(--font-size-800);
  font-weight: 700;
  line-height: var(--line-height-700);
  letter-spacing: 0;
}
#priorities .priorities__item .priority__message {
  position: relative;
  margin: 0;
}
@media (min-width: 992px) {
  #priorities .priorities__item .priority__content {
    padding: var(--inset-100) var(--inset-200) var(--inset-100);
  }
  #priorities .priorities__item .priority__line {
    position: absolute;
    z-index: 1;
    content: "";
    color: #ccc;
    border: 5px solid currentColor;
    border-width: 0 5px 5px 0;
    border-radius: 0 0 50px 0;
    box-sizing: border-box;
    pointer-events: none;
  }
  #priorities .priorities__item .priority__line::before, #priorities .priorities__item .priority__line::after {
    content: "";
    position: absolute;
    background-color: currentColor;
    border-radius: 50%;
    width: 5px;
    height: 5px;
    scale: 3;
  }
  #priorities .priorities__item .priority__line::before {
    top: -5px;
    right: -5px;
  }
  #priorities .priorities__item .priority__line::after {
    bottom: -5px;
    left: -5px;
  }
  #priorities .priorities__item:nth-child(even) {
    justify-self: end;
  }
  #priorities .priorities__item:nth-child(1) .priority__content {
    padding: var(--inset-100) var(--inset-200) var(--inset-100);
  }
  #priorities .priorities__item:nth-child(1) .priority__line {
    scale: -1 1;
    top: 370px;
    left: 14px;
    width: 280px;
    height: 110%;
  }
  #priorities .priorities__item:nth-child(2) .priority__content {
    padding-right: var(--inset-200);
  }
  #priorities .priorities__item:nth-child(2) .priority__line {
    scale: 1 1;
    width: 400px;
    height: 50%;
    bottom: -130px;
    right: 30px;
  }
  #priorities .priorities__item:nth-child(3) .priority__content {
    padding-right: var(--inset-200);
  }
  #priorities .priorities__item:nth-child(3) .priority__line {
    display: none;
  }
}
@media (min-width: 1200px) {
  #priorities .priorities__item {
    max-width: 960px;
  }
  #priorities .priorities__item:nth-child(1) .priority__line {
    width: 500px;
    height: 120%;
  }
}

#help .section__title {
  text-align: center;
  font-family: var(--font-family);
  font-size: var(--font-size-700);
  font-weight: 600;
  line-height: var(--line-height-700);
  letter-spacing: var(--letter-spacing-700);
}
#help .section__promos {
  display: grid;
  gap: var(--inset-200);
}
#help .section__promos .promo {
  padding: var(--inset-400) var(--inset-200) 0;
  text-align: center;
  overflow: hidden;
  box-shadow: var(--shadow-elevation-400);
  --mask-button-foreground: #fff;
  --mask-button-background-hover: #fff;
  --mask-button-foreground-hover: #000;
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), transparent);
  color: #fff;
}
#help .section__promos .promo:nth-child(1) {
  background-color: rgba(203, 150, 56, 0.33);
}
#help .section__promos .promo:nth-child(1) .promo__button {
  --mask-button-background: rgba(203, 150, 56);
}
#help .section__promos .promo:nth-child(2) {
  background-color: rgba(92, 97, 52, 0.33);
}
#help .section__promos .promo:nth-child(2) .promo__button {
  --mask-button-background: rgba(92, 97, 52);
}
#help .section__promos .promo:nth-child(3) {
  background-color: rgba(50, 133, 166, 0.33);
}
#help .section__promos .promo:nth-child(3) .promo__button {
  --mask-button-background: rgba(50, 133, 166);
}
#help .section__promos .promo .promo__content {
  margin-bottom: var(--inset-300);
}
#help .section__promos .promo .promo__content .content__title {
  margin-bottom: var(--inset-100);
  font-family: var(--font-family);
  font-size: var(--font-size-800);
  font-weight: 600;
  line-height: var(--line-height-700);
  letter-spacing: var(--letter-spacing-700);
}
#help .section__promos .promo .promo__content .content__message {
  font-family: var(--font-family);
  font-size: var(--font-size-200);
  font-weight: 400;
  line-height: var(--line-height-100);
  letter-spacing: var(--letter-spacing-100);
}
#help .section__promos .promo .promo__content p {
  margin: 0;
}
#help .section__promos .promo .promo__image {
  margin-top: var(--inset-300);
  margin-left: var(--inset--200);
  width: calc(100% + var(--inset-200) + var(--inset-200));
  max-width: none;
  height: 100px;
  -o-object-fit: contain;
     object-fit: contain;
}
#help .section__promos .promo:nth-child(3) .promo__image {
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top;
     object-position: top;
  height: 170px;
}
@media (min-width: 992px) {
  #help .section__promos {
    grid-template-columns: 1fr 1fr 1fr;
  }
  #help .section__promos .promo {
    display: grid;
    grid-template-rows: subgrid;
    grid-template-columns: subgrid;
    grid-row: 1/span 3;
    gap: 0;
  }
  #help .section__promos .promo .promo__content {
    grid-row: 1;
  }
  #help .section__promos .promo .promo__button {
    grid-row: 2;
  }
  #help .section__promos .promo .promo__image {
    grid-row: 3;
    -o-object-fit: fill;
       object-fit: fill;
    height: auto;
    align-self: end;
  }
}

#challenge iframe {
  width: 100%;
  max-width: 560px;
  margin: auto;
  aspect-ratio: 560/315;
}
#challenge .button {
  border: 1px solid #000;
}
#challenge .section__grid .section__content {
  padding-block: var(--inset-100);
}
#challenge .section__grid .section__disclaimer {
  font-size: 80%;
  border-top: 1px solid currentColor;
  margin-top: var(--inset-200);
  padding-top: var(--inset-200);
  color: #555;
}

@media (min-width: 768px) {
  #challenge iframe {
    max-width: none;
    height: 100%;
  }
  #challenge .section__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  #challenge .section__grid .section__content {
    padding-block: var(--inset-100);
    padding-left: var(--inset-200);
  }
  #challenge .section__grid .section__disclaimer {
    margin: 0;
    border: 0;
    padding-top: var(--inset-500);
    padding-inline: var(--inset-500);
    grid-column: 1/span 2;
  }
}
footer {
  background-color: var(--color-stone-gray);
  background-image: linear-gradient(var(--color-stone-gray), var(--color-dark-tan));
  color: #fff;
  padding-block: var(--inset-300) var(--inset-200);
}
footer p {
  margin: 0;
}
footer a {
  color: inherit;
  text-align: right;
  text-decoration: none;
}
footer a:hover {
  text-decoration: underline;
}
footer .footer__grid {
  display: grid;
  grid-template: "logo" "social" "contact";
  gap: var(--inset-200);
}
@media (min-width: 768px) {
  footer .footer__grid {
    grid-template: "logo social" "contact contact"/1fr auto;
  }
}
@media (min-width: 992px) {
  footer .footer__grid {
    grid-template: "logo contact social"/auto 1fr auto;
  }
}
footer .footer__grid .footer__logo {
  grid-area: logo;
}
footer .footer__grid .footer__social {
  grid-area: social;
}
footer .footer__grid .footer__contact {
  grid-area: contact;
}
footer .footer__heading {
  text-transform: uppercase;
}
footer .social__links {
  display: flex;
  flex-flow: row wrap;
  gap: var(--inset-100);
  margin: 0;
  padding: 0;
}
footer .social__links li {
  display: block;
}
footer .social__links a {
  transition: opacity 0.3s;
}
footer .social__links:has(a:hover) a:not(:hover) {
  opacity: 0.5;
}/*# sourceMappingURL=main.css.map */