/*----------------------------------------------*\
    GLOBAL
	======

	@package designcenter

\*----------------------------------------------*/
/*----------------------------------------------*\
    COMPONENTS
	==========

	@package designcenter

\*----------------------------------------------*/
/* 
 *
 * / Variables
------------------------------------------------*/
/* Breakpoints */
/* 368px, bigger phones */
/* 608px */
/* 800px */
/* 1008px, tablet vertical */
/* 1200px */
/* 1400px */
/* 
 *
 * ANCHOR:  Variables
------------------------------------------------*/
:root {
  --black: #3D2D33;
  --white: #FFFFF7;
  --gray: #DEE2E4;
  --blue: #1798E8;
  --pink: #FFBEFF;
  --red: #FD6824;
  --green: #00AE00;
  --yellow: #FFE500;
}

:root {
  /* Major Third (factor: 1.25)*/
  --size-010: .134rem;
  --size-020: .168rem;
  --size-030: .21rem;
  --size-040: .262rem;
  --size-050: .328rem;
  --size-060: .41rem;
  --size-070: .512rem;
  --size-080: .64rem;
  --size-090: .8rem;
  --size-100: 1rem; /* <-- Default */
  --size-200: 1.25rem;
  --size-300: 1.563rem;
  --size-400: 1.953rem;
  --size-500: 2.441rem;
  --size-600: 3.052rem;
  --size-700: 3.815rem;
}
@media screen and (min-width: 23rem) {
  :root {
    font-size: 1.1rem;
  }
}
@media screen and (min-width: 38rem) {
  :root {
    font-size: 1.2rem;
  }
}
@media screen and (min-width: 50rem) {
  :root {
    font-size: 1.3rem;
  }
}
@media screen and (min-width: 63rem) {
  :root {
    font-size: 1.4rem;
  }
}
@media screen and (min-width: 75rem) {
  :root {
    font-size: 1.5rem;
  }
}
@media screen and (min-width: 87.5rem) {
  :root {
    font-size: 1.6rem;
  }
}

:root {
  --margin-outside: 1em;
  --margin-vertical-large: var(--size-600);
  --margin-vertical-small: var(--size-100);
}
@media screen and (min-width: 50rem) {
  :root {
    --margin-outside: 2em;
  }
}
@media screen and (min-width: 75rem) {
  :root {
    --margin-outside: 3em;
  }
}

:root {
  --border-radius-large: var(--size-100);
  --border-radius-small: var(--size-080);
}
@media screen and (min-width: 50rem) {
  :root {
    --border-radius-large: var(--size-300);
    --border-radius-small: var(--size-100);
  }
}

/* 
 *
 * ANCHOR: Global
------------------------------------------------*/
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  font-family: "Fabriga", sans-serif;
  background-color: var(--white);
  color: var(--black);
}

svg {
  width: 100%;
  height: auto;
}

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

.max-width {
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--margin-outside);
  padding-right: var(--margin-outside);
}

/* 
 *
 * ANCHOR: Shapes
------------------------------------------------*/
.shapes {
  height: 8vw;
  max-width: 1600px;
  margin: 0 auto;
  container-type: inline-size;
  cursor: crosshair;
}
.appointment .shapes {
  height: 13vh;
  max-width: 1000px;
}
.shapes .shape {
  position: absolute;
  cursor: crosshair;
}

/* 
 *
 * ANCHOR: Section
 ------------------------------------------------*/
.section {
  position: relative;
  z-index: 90;
}
.section--rounded-corners {
  margin-top: calc(-1 * var(--border-radius-large));
  border-radius: var(--border-radius-large) var(--border-radius-large) 0 0;
  overflow: hidden;
  position: relative;
  z-index: 100;
}
.section--no-negative-margin {
  margin-top: 0;
}
.section__title {
  font-size: var(--size-500);
  font-weight: 700;
  margin-bottom: var(--size-100);
  line-height: 1;
}

/* 
 *
 * ANCHOR: Buttons
------------------------------------------------*/
.button {
  margin-bottom: var(--margin-vertical-large);
}
.button--centered {
  text-align: center;
}
.button--hidden {
  /* used for layout spacing */
  visibility: hidden;
}
.button__link {
  background-color: var(--black);
  color: var(--black);
  text-transform: uppercase;
  text-decoration: none;
  font-size: var(--size-100);
  padding: var(--size-090) var(--size-200) var(--size-080);
  border-radius: 4em;
  display: inline-block;
  letter-spacing: 0.03em;
  line-height: 1.1;
  font-weight: 600;
}
.button__link:focus {
  outline: 0;
}
.button__link:focus-visible {
  outline: solid var(--size-010) black;
}
.button__link--text-white {
  color: var(--white);
}
.button__link--text-white:focus-visible {
  outline: solid var(--size-010) var(--yellow);
  color: var(--yellow);
}
.button__link--text-yellow {
  color: var(--yellow);
}
.button__link--text-yellow:focus-visible {
  outline: solid var(--size-010) var(--white);
  color: var(--white);
}
.button--secondary .button__link {
  border-radius: 4em;
  padding: var(--size-050) var(--size-080) var(--size-040);
  font-size: var(--size-100);
  font-weight: 600;
  border: 2px solid var(--black);
  background-color: var(--pink);
}
.button--secondary .button__link:hover, .button--secondary .button__link:focus-visible {
  background-color: var(--white);
}
.button__lead-in {
  margin-bottom: var(--size-100);
}
.button__postscript {
  font-size: var(--size-080);
  margin-top: var(--size-070);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/*
 *
 * ANCHOR: Header
------------------------------------------------*/
.site-header {
  background-color: var(--white);
  display: grid;
  padding-bottom: var(--size-100);
  gap: var(--size-100);
  grid-template-columns: 1fr 2fr;
  -webkit-box-align: end;
          align-items: end;
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
}
.site-header .header-shapes {
  grid-column: span 2;
}
.site-header__logo {
  max-width: 10rem;
}
.site-header__nav {
  font-size: var(--size-090);
  justify-self: end;
}
@media screen and (min-width: 50rem) {
  .site-header__nav {
    font-size: var(--size-100);
  }
}
.site-header__nav ul {
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
  gap: var(--size-010);
}
@media screen and (min-width: 38rem) {
  .site-header__nav ul {
    display: -webkit-box;
    display: flex;
    flex-wrap: nowrap;
  }
}
.site-header__nav a {
  display: inline-block;
  background-color: var(--blue);
  color: var(--white);
  padding: var(--size-060) var(--size-090);
  border-radius: 100px;
  text-decoration: none;
  -webkit-transition: color 0.3s, background-color 0.3s, -webkit-transform 0.3s;
  transition: color 0.3s, background-color 0.3s, -webkit-transform 0.3s;
  transition: color 0.3s, background-color 0.3s, transform 0.3s;
  transition: color 0.3s, background-color 0.3s, transform 0.3s, -webkit-transform 0.3s;
  line-height: 1;
}
.site-header__nav a:focus {
  outline: 0;
}
.site-header__nav a:focus-visible {
  outline: solid var(--size-010) #98cae9;
  color: var(--yellow);
}
.site-header__nav li:hover a {
  color: var(--black);
  background-color: var(--yellow);
  -webkit-transform: translate(0, 2px);
          transform: translate(0, 2px);
}
.site-header__nav img {
  width: 100%;
  height: auto;
}

.sticky-nav {
  position: fixed;
  top: -10em;
  z-index: 1000;
  left: 0;
  right: 0;
}
@media screen and (min-width: 38rem) {
  .show-floating-nav .sticky-nav {
    top: 0.5rem;
    -webkit-animation: slide-down 0.3s ease-in-out;
            animation: slide-down 0.3s ease-in-out;
  }
  @-webkit-keyframes slide-down {
    from {
      -webkit-transform: translateY(-100%);
              transform: translateY(-100%);
    }
    to {
      -webkit-transform: translateY(0);
              transform: translateY(0);
    }
  }
  @keyframes slide-down {
    from {
      -webkit-transform: translateY(-100%);
              transform: translateY(-100%);
    }
    to {
      -webkit-transform: translateY(0);
              transform: translateY(0);
    }
  }
}
.sticky-nav__wrapper {
  position: relative;
}
.sticky-nav__nav {
  width: 100%;
}
.sticky-nav__nav ul {
  -webkit-box-pack: end;
          justify-content: end;
}
.sticky-nav__nav a {
  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/*
 *
 * ANCHOR: Intro
------------------------------------------------*/
.intro {
  background-color: var(--yellow);
  color: var(--black);
  text-align: center;
  padding: var(--margin-vertical-large) var(--margin-outside) 0;
}
.intro__room-label {
  display: inline-block;
  background-color: var(--yellow);
  color: var(--black);
  border-radius: 4em;
  padding: var(--size-040) var(--size-080) var(--size-010);
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: var(--size-100);
  line-height: 1;
  font-size: var(--size-100);
  border: 2px solid var(--black);
  letter-spacing: 0.03em;
}
@media screen and (min-width: 50rem) {
  .intro__room-label {
    font-size: var(--size-200);
    border: 3px solid var(--black);
  }
}
.intro__text {
  line-height: 1.2;
  max-width: 28ch;
  margin-left: auto;
  margin-right: auto;
  font-size: var(--size-400);
}
@media screen and (min-width: 50rem) {
  .intro__text {
    font-size: var(--size-400);
  }
}

/*
 *
 * ANCHOR: Hero
------------------------------------------------*/
.hero {
  position: sticky;
  top: 0;
  z-index: 80;
}
.hero img {
  max-height: 95vh;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

/*
 *
 * ANCHOR: Services
------------------------------------------------*/
.services {
  background-color: var(--yellow);
  padding-top: var(--margin-vertical-large);
  padding-bottom: 1px; /* hack to prevent margin from previous section to show weird */
}
.services__wrapper {
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
  gap: var(--size-100);
  -webkit-box-pack: center;
          justify-content: center;
  margin-bottom: var(--margin-vertical-large);
}
@media screen and (min-width: 75rem) {
  .services__wrapper {
    gap: var(--size-080);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.services__item {
  padding: var(--size-300);
  background-color: var(--pink);
  border-radius: 20px;
}
@media screen and (min-width: 38rem) {
  .services__item {
    width: calc(50% - var(--size-300) / 2);
  }
}
@media screen and (min-width: 75rem) {
  .services__item {
    width: auto;
  }
}
.services__item h3 {
  font-size: var(--size-400);
  margin-bottom: var(--size-100);
  font-weight: 700;
  text-align: center;
}
@media screen and (min-width: 75rem) {
  .services__item h3 {
    font-size: var(--size-400);
  }
}
@media screen and (min-width: 87.5rem) {
  .services__item h3 {
    font-size: var(--size-400);
  }
}
.services__item p {
  font-size: var(--size-100);
  line-height: 1.4;
}
.services__item svg {
  display: block;
  margin-bottom: var(--size-100);
  margin-left: auto;
  margin-right: auto;
  color: var(--yellow);
  width: auto;
  height: var(--size-600);
}

/* 
 *
 * ANCHOR: Schedule
------------------------------------------------*/
.schedule {
  background-color: var(--yellow);
  padding-bottom: var(--margin-vertical-large);
}
.schedule__wrapper {
  gap: var(--size-080);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  -webkit-box-pack: center;
          justify-content: center;
  margin-bottom: var(--margin-vertical-large);
}
.schedule__item {
  padding: var(--size-200);
  background-color: var(--blue);
  border-radius: 20px;
  color: var(--yellow);
}
.schedule__day {
  font-size: var(--size-200);
  font-weight: 400;
  line-height: 1.2;
}
.schedule__day span {
  display: none;
  font-size: var(--size-300);
}
@media screen and (min-width: 50rem) {
  .schedule__day span {
    display: inline;
  }
}
.schedule h3 {
  font-size: var(--size-300);
  margin-bottom: var(--size-100);
  font-weight: 700;
}

/* 
 *
 * ANCHOR: FAQ
------------------------------------------------*/
.faq {
  background-color: var(--gray);
  padding-top: var(--margin-vertical-large);
  padding-bottom: calc(var(--margin-vertical-large) + var(--border-radius-large));
}
.faq__item {
  margin-bottom: var(--size-100);
  border-radius: var(--border-radius-large);
  -webkit-transition: background-color 0.2s, -webkit-box-shadow 0.2s;
  transition: background-color 0.2s, -webkit-box-shadow 0.2s;
  transition: background-color 0.2s, box-shadow 0.2s;
  transition: background-color 0.2s, box-shadow 0.2s, -webkit-box-shadow 0.2s;
  background-color: rgba(255, 255, 255, 0.1);
}
.faq__item[open] {
  padding-bottom: var(--size-100);
  padding-bottom: var(--size-100);
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.faq__item[open] summary {
  translate: 0 2px !important;
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
}
.faq__item[open] summary::after {
  /* Arrow when open */
  -webkit-transform: rotate(-180deg);
          transform: rotate(-180deg);
  content: url("data:image/svg+xml,%3Csvg width='44' height='27' viewBox='0 0 44 27' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24.2746 26.0137C23.079 27.3711 20.964 27.3711 19.7684 26.0137L1.27732 5.02211C-0.431774 3.0819 0.945312 0.0317373 3.53037 0.0317383L40.5127 0.0317413C43.0977 0.0317413 44.4748 3.08191 42.7656 5.02211L24.2746 26.0137Z' fill='%23FFBEFF'/%3E%3C/svg%3E%0A");
}
.faq__item[open] summary:focus-visible {
  outline: solid var(--size-010) var(--pink);
}
.faq__item[open] p, .faq__item[open] li {
  -webkit-animation: slidedown 0.3s ease forwards;
          animation: slidedown 0.3s ease forwards;
}
@-webkit-keyframes slidedown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-1em);
            transform: translateY(-1em);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes slidedown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-1em);
            transform: translateY(-1em);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
.faq__item summary {
  background-color: var(--white);
  font-weight: 700;
  list-style: none;
  border-radius: var(--border-radius-small);
  padding: var(--size-100) var(--size-500) var(--size-100) var(--size-100);
  line-height: 1.3;
  cursor: pointer;
  position: relative;
  font-size: var(--size-100);
  translate: 0 0;
  -webkit-transition: translate 0.2s, -webkit-box-shadow 0.2s;
  transition: translate 0.2s, -webkit-box-shadow 0.2s;
  transition: translate 0.2s, box-shadow 0.2s;
  transition: translate 0.2s, box-shadow 0.2s, -webkit-box-shadow 0.2s;
  position: relative;
  z-index: 10; /* in front of text that slides down */
}
@media screen and (min-width: 23rem) {
  .faq__item summary {
    font-size: var(--size-200);
  }
}
@media screen and (min-width: 50rem) {
  .faq__item summary {
    padding: var(--size-300) var(--size-700) var(--size-300) var(--size-300);
  }
}
.faq__item summary::after {
  /* Arrow when closed */
  content: url("data:image/svg+xml,%3Csvg width='44' height='27' viewBox='0 0 44 27' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24.2746 26.0137C23.079 27.3711 20.964 27.3711 19.7684 26.0137L1.27732 5.02211C-0.431774 3.0819 0.945312 0.0317373 3.53037 0.0317383L40.5127 0.0317413C43.0977 0.0317413 44.4748 3.08191 42.7656 5.02211L24.2746 26.0137Z' fill='%23DEE2E4'/%3E%3C/svg%3E%0A");
  position: absolute;
  right: var(--size-020);
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  -webkit-transform-origin: center 10%;
          transform-origin: center 10%;
  scale: 0.5;
  -webkit-transition: -webkit-transform 0.2s;
  transition: -webkit-transform 0.2s;
  transition: transform 0.2s;
  transition: transform 0.2s, -webkit-transform 0.2s;
}
@media screen and (min-width: 50rem) {
  .faq__item summary::after {
    scale: 0.8;
    right: var(--size-100);
    margin-top: 0.125em; /* optical alignment */
  }
}
.faq__item summary:hover {
  translate: 0 -2px;
  -webkit-box-shadow: 5px 6px 10px rgba(0, 0, 0, 0.1);
          box-shadow: 5px 6px 10px rgba(0, 0, 0, 0.1);
}
.faq__item summary:focus {
  outline: none;
}
.faq__item summary:focus-visible {
  outline: solid var(--size-010) var(--blue);
  outline-offset: 2px;
}
.faq__item summary strong { /* for questions */
  background-color: var(--white);
  color: var(--black);
  text-transform: uppercase;
  text-decoration: none;
  font-size: var(--size-100);
  font-weight: 600;
  padding: var(--size-010) var(--size-060) 0.1em;
  border-radius: 4em;
  border: 2px solid var(--black);
  letter-spacing: 0.03em;
  margin: 0 var(--size-030);
}
.faq__item::-webkit-details-marker {
  display: none;
}
.faq__item p, .faq__item li {
  margin-top: var(--size-100);
  padding: 0 var(--size-100);
  line-height: 1.4;
  max-width: 40rem;
  font-size: var(--size-100);
}
@media screen and (min-width: 23rem) {
  .faq__item p, .faq__item li {
    font-size: var(--size-200);
  }
}
@media screen and (min-width: 50rem) {
  .faq__item p, .faq__item li {
    padding: 0 var(--size-300);
  }
}
.faq__item li {
  margin-left: var(--size-300);
}
.faq__item li strong { /* for answers */
  background-color: var(--pink);
  text-transform: uppercase;
  text-decoration: none;
  font-size: var(--size-100);
  padding: var(--size-040) var(--size-060) var(--size-020);
  font-weight: 700;
  border: none;
  border-radius: 0.2em;
  letter-spacing: 0.03em;
}
.faq__item a {
  display: inline-block;
  color: var(--white);
  background-color: var(--blue);
  padding: var(--size-050) var(--size-080) var(--size-060);
  font-weight: 400;
  text-decoration: none;
  border-radius: 4em;
  line-height: 1.1;
}
.faq__item a:hover {
  color: var(--black);
  background-color: var(--yellow);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.faq__item a:focus {
  outline: none;
}
.faq__item a:focus-visible {
  outline: solid var(--size-010) var(--blue);
  outline-offset: 2px;
}

/* 
 *
 * ANCHOR: Team	
------------------------------------------------*/
.team {
  background-color: var(--pink);
  padding-top: var(--margin-vertical-large);
  padding-bottom: var(--margin-vertical-large);
}
.team__title {
  font-size: var(--size-700);
}
.team__wrapper {
  gap: var(--size-500) var(--size-080);
  display: grid;
}
@media screen and (min-width: 30rem) {
  .team__wrapper {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media screen and (min-width: 63rem) {
  .team__wrapper {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.team__item {
  display: grid;
  grid-template-rows: 1fr auto;
}
.team__item .button {
  margin-bottom: 0; /* overwrite default */
}
.team__card {
  padding: var(--size-080);
  background-color: var(--white);
  border-radius: 20px;
  margin-bottom: var(--margin-vertical-small);
  display: grid;
  grid-template-rows: auto auto 1fr auto;
}
@media screen and (min-width: 38rem) {
  .team__card {
    padding: var(--size-200);
  }
}
.team__card video {
  border-radius: 10px;
  margin-bottom: var(--size-100);
  max-width: 100%;
}
.team__card video:focus {
  outline: none;
}
.team__card video:focus-visible {
  outline: solid var(--size-010) var(--black);
}
.team__card__video-missing {
  border-radius: 10px;
  aspect-ratio: 540/800;
  margin-bottom: var(--size-100);
  background-color: #f4f2f2;
}
.team__card h3 {
  font-size: var(--size-200);
  font-weight: 700;
  margin-bottom: var(--size-020);
}
.team__skills {
  font-size: var(--size-100);
  margin-bottom: var(--size-080);
}
.team__bio {
  font-size: var(--size-090);
  line-height: 1.25;
  margin-bottom: var(--size-040);
}
.team__meta {
  font-size: var(--size-090);
  margin-top: var(--size-080);
  line-height: 1.8;
}
.team__meta > * {
  display: inline-block;
}
.team__tag {
  background-color: var(--pink);
  color: var(--black);
  border-radius: 4em;
  padding: var(--size-040) var(--size-080);
  line-height: 1;
}
.team__website {
  margin-left: var(--size-020);
}
@media screen and (min-width: 50rem) {
  .team__website {
    font-size: var(--size-080);
  }
}
.team__website a:focus {
  outline: 0;
}
.team__website a:focus-visible {
  outline: solid var(--size-010) var(--black);
  outline-offset: 5px;
  text-decoration: none;
  border-radius: 2em;
}

/* 
 *
 * ANCHOR: Appointment
------------------------------------------------*/
.appointment {
  background-color: var(--white);
  color: var(--black);
  text-align: center;
  padding-bottom: var(--margin-vertical-large);
  position: sticky;
  top: 0;
  z-index: 80;
}
.appointment__wrapper {
  min-height: 40vh;
  display: grid;
  place-content: center;
}
.appointment__title {
  font-size: var(--size-700);
}

/* 
 *
 * ANCHOR: Footer
------------------------------------------------*/
.site-footer {
  background-color: var(--blue);
  color: var(--white);
  padding-top: var(--margin-vertical-large);
  padding-bottom: 10rem;
  min-height: 100vh;
}
.site-footer__info {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
}
@media screen and (min-width: 38rem) {
  .site-footer__info {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
            flex-direction: row;
    -webkit-box-pack: justify;
            justify-content: space-between;
    -webkit-box-align: end;
            align-items: end;
  }
}
.site-footer__col {
  -webkit-box-flex: 1;
          flex: 1;
}
@media screen and (min-width: 38rem) {
  .site-footer__col {
    max-width: 100%;
  }
}
.site-footer__logo {
  max-width: 8em;
  padding-bottom: var(--size-100);
}
.site-footer__text {
  font-size: var(--size-090);
  line-height: 1.3;
  margin-bottom: var(--size-100);
}
@media screen and (min-width: 38rem) {
  .site-footer__text--right-aligned {
    text-align: right;
  }
}
.site-footer__text strong { /* for room number */
  background-color: var(--yellow);
  color: var(--blue);
  border: none;
  font-size: var(--size-080);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-radius: 4em;
  padding: var(--size-030) var(--size-060) var(--size-020);
  font-weight: 600;
  margin-left: var(--size-020);
}
.site-footer__text a {
  font-size: var(--size-100);
}
.site-footer__text a:focus {
  outline: none;
}
.site-footer__text a:focus-visible {
  outline: solid var(--size-010) var(--yellow);
  outline-offset: 5px;
  text-decoration: none;
  border-radius: 2em;
}
.site-footer__image {
  margin-bottom: var(--margin-vertical-small);
  display: block;
  border-radius: var(--border-radius-large);
  overflow: hidden;
}

/* 
 *
 * ANCHOR: Credits
------------------------------------------------*/
.credits {
  background-color: #41a9e9;
  color: var(--black);
  padding-top: var(--margin-vertical-large);
  padding-bottom: var(--margin-vertical-large);
  padding-left: var(--margin-outside);
  padding-right: var(--margin-outside);
}
.credits__wrapper {
  line-height: 1.5;
}
.credits__title {
  font-size: var(--size-200);
  font-weight: 700;
  padding-bottom: var(--size-060);
}
.credits__intro {
  font-weight: 400;
  font-size: var(--size-080);
  color: var(--black);
  padding-bottom: var(--size-100);
  max-width: 70ch;
}
.credits__item {
  display: grid;
  font-size: var(--size-080);
  line-height: 1.4;
}
.credits__header {
  color: var(--black);
  font-weight: 600;
  padding-bottom: var(--size-060);
  font-size: var(--size-090);
}
.credits__list {
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
  -webkit-box-pack: start;
          justify-content: start;
  -webkit-box-align: start;
          align-items: start;
  gap: var(--size-040);
  margin-bottom: var(--size-100);
}
.credits__name {
  font-size: var(--size-080);
  color: var(--white);
  background-color: var(--blue);
  border-radius: 4em;
  padding: var(--size-050) var(--size-060);
  font-weight: 500;
  line-height: 1;
}