.projects__header {
  background: url(../../img/safeSpace/header.png) no-repeat;
  background-position: center 30%;
  background-size: cover;
}

.project-detail__intro__image-container {
  background: url(../../img/safeSpace/introBackground.png) no-repeat;
  background-position: center;
  background-size: cover;
}

.project-content {
  display: grid;
  grid-template-columns: 20rem 1fr;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.project__nav-container {
  background: light-dark(
    var(--light-background-600),
    var(--dark-background-600)
  );
  padding: 2rem;
  height: 100%;
}

.project__nav {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 1rem;
  position: sticky;
  top: 5rem;
}

.project__nav__link {
  text-decoration: none;
  color: light-dark(var(--light-text-500), var(--dark-text-500));
  height: 100%;
}

.project__nav__link:hover {
  color: light-dark(var(--light-primary-500), var(--dark-secondary-500));
  cursor: pointer;
}

.project__main {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 4rem;
  width: 100%;
  max-width: 60rem;
  justify-self: center;
  box-sizing: border-box;
  overflow-x: hidden;
}

.project__main__section {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.project__main__section__text {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.project__main__header {
  text-align: center;
  font-size: 40px;
  font-weight: 600;
  scroll-margin-top: 8rem;
}

.project__main__description {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.project__main__link {
  font-size: 16px;
  font-weight: 500;
  color: light-dark(var(--light-text-500), var(--dark-text-500));
  align-self: flex-start;
  text-decoration: underline;
}

.project__main__link:hover {
  color: light-dark(var(--light-primary-500), var(--dark-secondary-500));
  cursor: pointer;
}

.project__main__section__screens-overview {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.project__main__section__screens-overview__screen {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  width: 40vw;
}

.project__main__section__screens-overview__screen.right-align {
  align-self: flex-end;
}

.project__main__section__screens-overview__screen > a {
  display: contents;
}

.project__main__section__screens-overview__image {
  width: 100%;
  height: auto;
  object-fit: cover;
  max-width: 12vw;
}

.project__main__section__screens-overview__text {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.project__main__section__screens-overview__header {
  font-size: 34px;
  font-weight: 500;
}

.project__main__section__screens-overview__description {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.project__main__section__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
}

.project__main__section__stat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border: 4px solid
    light-dark(var(--light-background-600), var(--dark-background-400));
  border-radius: 16px;
}

.project__main__section__stat__number {
  font-size: 28px;
  font-weight: 400;
}

.project__main__section__stat__description {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.project__main__section__personas {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  justify-content: center;
  align-items: center;
}

.project__main__section__persona__title {
  text-align: center;
  font-size: 34px;
  font-weight: 500;
}

.project__main__section__persona {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  max-width: 50rem;
  border: 4px solid
    light-dark(var(--light-background-600), var(--dark-background-400));
  border-radius: 16px;
  padding: 2rem;
}

.project__main__section__persona__heading {
  font-size: 20px;
  font-weight: 600;
  text-align: left;
  margin-bottom: 0.5rem;
}

.project__main__section__style-guide {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  background: light-dark(
    var(--dark-background-400),
    var(--dark-background-600)
  );
  border-radius: 16px;
  padding: 2rem;
}

.project__main__section__style-guide__image {
  width: 100%;
  height: auto;
  object-fit: contain;
  max-width: 100%;
}

.project__main__section__sitemap,
.project__main__section__userflow {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
  align-items: center;
}

.project__main__section__sitemap__image,
.project__main__section__userflow__image {
  width: 100%;
  height: auto;
  object-fit: cover;
  max-width: 90vw;
}

.project__main__section__wireframes {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  justify-content: center;
  align-items: center;
}

.project__main__section__wireframes__chips {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
}

.project-mainsection__wireframes__chip {
  border-radius: 99px;
  font-size: 20px;
  font-weight: 400;
  border: none;
  background: light-dark(var(--light-secondary-500), var(--dark-secondary-500));
  padding: 0.5rem 1rem;
  color: light-dark(var(--light-text-500), var(--light-text-500));
}

.project-mainsection__wireframes__chip:hover {
  background: light-dark(var(--light-secondary-300), var(--dark-secondary-300));
}

.project-mainsection__wireframes__chip.active {
  background: light-dark(var(--light-primary-500), var(--dark-primary-500));
  color: light-dark(var(--dark-text-500), var(--dark-text-500));
}

.project__main__section__wireframes__slides__arrow {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}

.project__main__section__wireframes__screens {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  justify-content: center;
  align-items: flex-start;
  max-width: 100%;
  flex-wrap: nowrap;
}

.project__main__section__wireframes__states {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.project__main__section__wireframes__slides {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  justify-content: center;
  align-items: center;
}

.project__main__section__wireframes__image {
  width: 100%;
  height: auto;
  object-fit: cover;
  max-height: 90vh;
  max-width: 100%;
}

#wireframes-lofi-gallery,
#wireframes-hifi-gallery {
  display: flex;
  justify-content: center;
  align-items: center;
}

#wireframes-lofi-gallery .pswp-gallery__item,
#wireframes-hifi-gallery .pswp-gallery__item {
  display: block;
}

.project__main__section__wireframes__slides__images .pswp-gallery__item {
  display: contents;
}

.project__main__section__code {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
}

.project__main__section__code__description {
  display: flex;
  flex-direction: row;
  gap: 2rem;
}

.project__main__section__code__description.right-align {
  align-self: flex-end;
}

.project__main__section__code__images {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.project__main__section__code__icon {
  max-width: 80px;
}

.project__main__section__code__navbar-image {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.project__main__section__code__screen-image {
  width: 100%;
  height: auto;
  object-fit: cover;
  max-width: 20rem;
}

.project__main__section__code__text {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.project__main__section__code__pros {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 2rem;
  border: 4px solid light-dark(var(--light-accent-500), var(--dark-accent-500));
  border-radius: 16px;
  background: light-dark(var(--light-accent-700-30), var(--dark-accent-700-30));
}

.project__main__section__code__cons {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 2rem;
  border: 4px solid light-dark(var(--light-red-500), var(--dark-red-500));
  border-radius: 16px;
  background: light-dark(var(--light-red-700-30), var(--dark-red-700-30));
}

.project__main__section__takeaways {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.project__main__section__code__title {
  font-size: 34px;
  font-weight: 500;
}

.project__main__section__code__pros-title {
  font-size: 20px;
  font-weight: 600;
}

.project__main__section__code__cons-title {
  font-size: 20px;
  font-weight: 600;
}

.project__main__section__showcase-imgs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.project__main__section__showcase-imgs__image {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.project__main__section__takeaway {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border: 4px solid
    light-dark(var(--light-background-600), var(--dark-background-400));
  border-radius: 16px;
  padding: 1rem;
}

.project__main__section__takeaway__title {
  font-size: 24px;
  font-weight: 400;
  text-align: center;
}

.project__main__section__takeaway__description {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.project__main__section__code__pros ul,
.project__main__section__code__cons ul {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  list-style-type: disc;
  padding-left: 1.5rem;
}

.project__main__section__code__pros ul li,
.project__main__section__code__cons ul li {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.project__main__section__code__pros ul ul,
.project__main__section__code__cons ul ul {
  margin-top: 0.5rem;
  list-style-type: circle;
}

.project__main__section__code__pros ul ul li,
.project__main__section__code__cons ul ul li {
  font-size: 14px;
  font-weight: 400;
  color: light-dark(var(--light-text-600), var(--dark-text-600));
}

.project__main__promotional-material__link {
  text-align: end;
  text-decoration: none;
}

.project__main__section__promotional-material {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 1rem;
}

.project__main__section__promotional-material__image {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.project__main__section__promotional-material__image.double-width {
  grid-column: span 2;
}

.pswp-gallery__item {
  display: contents;
}

.project__main__section__prototype {
  display: flex;
  flex-direction: row;
  gap: 2rem;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

.project__main__section__prototype__figma {
  width: 375px;
  height: 667px;
  flex-shrink: 0;
}

.project__main__section__prototype__text {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 20rem;
}

.project__main__section__prototype__title {
  font-size: 34px;
  font-weight: 500;
}

.project__main__section__prototype__description {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.project__main__section__video {
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;
  object-fit: cover;
}