.swiper-horizontal {
  padding-bottom: calc(var(--gap-block) + 2.4rem);
  position: relative
}

.swiper-button-next,
.swiper-button-prev {
  width: 50%;
  height: calc(100% - var(--gap-block, 2rem) - 2.4rem);
  color: var(--border-color-light);
  padding: var(--content-padding);
  box-sizing: border-box;
  margin: 0;
  top: 0
}

.swiper-button-next:after,
.swiper-button-prev:after {
  font-size: var(--font-size-lg)
}

.swiper-button-next {
  justify-content: flex-end;
  left: auto;
  right: 0
}

.swiper-button-prev {
  justify-content: flex-start;
  left: 0;
  right: auto
}

.swiper-horizontal .swiper-pagination {
  top: auto;
  bottom: 0
}

.swiper-horizontal .swiper-pagination .swiper-pagination-bullet {
  background-color: #0000;
  width: 1.6rem;
  height: 2.4rem;
  margin: 0 .4rem;
  position: relative
}

.swiper-horizontal .swiper-pagination .swiper-pagination-bullet:after {
  content: "";
  background-color: var(--border-color-light);
  border-radius: .4rem;
  width: .8rem;
  height: .8rem;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

.swiper-horizontal .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active:after {
  background-color: var(--border-color-dark)
}

.view-toggle__group {
  display: flex
}

.view-toggle__btn {
  appearance: none;
  width: 2.4rem;
  height: 2.4rem;
  box-shadow: 0;
  text-indent: -9999px;
  opacity: .4;
  background-color: #0000;
  border: 0;
  border-radius: 0;
  transition: all .75s cubic-bezier(.4, 0, .2, 1);
  overflow: hidden
}

.view-toggle__btn:hover {
  opacity: 1
}

.view-toggle__btn[data-layout=cols-2] {
  background-image: url(../svg/icon-cols-1.svg);

  @media screen and (width>=60em) {
    background-image: url(../svg/icon-cols-2.svg)
  }
}

.view-toggle__btn[data-layout=cols-3] {
  background-image: url(../svg/icon-cols-3.svg);
  display: none;

  @media screen and (width>=60em) {
    display: inherit
  }
}

.view-toggle__btn[data-layout=list] {
  background-image: url(../svg/icon-list.svg)
}

.project-top {
  padding: var(--content-padding-block)calc(var(--content-padding-inline)/2);
  margin: 0 0 calc(var(--gap-block)*.5);
  justify-content: space-between;
  align-items: flex-end;
  display: flex;
  position: relative
}

.project-top .page-header {
  padding: 0
}

.project-top:after {
  content: "";
  top: auto;
  bottom: 0;
  left: calc(var(--content-padding-inline)*.5);
  right: calc(var(--content-padding-inline)*.5);
  background-color: var(--border-color-light);
  height: .1rem;
  position: absolute
}

.project-top .page-header {
  margin-bottom: 0
}

.project-item {
  flex-direction: column-reverse;
  display: flex
}

.project-item__bar {
  flex-grow: 1;
  display: flex
}

@media screen and (width<=37.5em) {
  .grid-layout:not(.grid-layout--list) .project-item__bar {
    flex-wrap: wrap
  }

  .grid-layout:not(.grid-layout--list) .project-item .project-item__title {
    font-size: var(--font-size-md)
  }

  .grid-layout:not(.grid-layout--list) .project-item .project-item__meta {
    column-gap: var(--gap-inline);
    padding-left: calc(var(--gap-inline)/2);
    display: flex
  }

  .project-item .project-item__meta>.project-item__meta-item {
    flex: 1 0 calc(50% - var(--gap-inline)/2);
    font-size: var(--font-size-sm);
    position: relative
  }

  .project-item .project-item__meta>.project-item__meta-item:not(:first-child):before {
    content: "";
    left: calc(var(--gap-inline)/-2);
    background-color: var(--border-color-light);
    width: .1rem;
    position: absolute;
    top: 0;
    bottom: 0
  }
}

.project-item h2,
.project-item p {
  margin: 0
}

.project-item .project-item__title {
  font-size: var(--font-size-md);
  font-weight: var(--font-heading-weight);
  margin: 0;
  position: relative;

  @media screen and (width<=37.5em) {
    font-size: var(--font-size-sm)
  }

  @media screen and (width>=100em) {
    font-size: calc(var(--font-size-md)*1.25);
    line-height: 1.2
  }
}

.project-item .project-item__subtitle {
  font-size: var(--font-size-md);
  font-weight: var(--font-heading-weight);
  color: var(--global-font-color-light);

  @media screen and (width<=37.5em) {
    font-size: var(--font-size-sm)
  }
}

.project-item .project-item__meta {
  height: 100%;
  padding-left: calc(var(--content-padding-inline)/2);
  font-size: var(--font-size-md);
  font-weight: var(--font-heading-weight);
  margin: 0;
  position: relative
}

.project-item__meta:before {
  content: "";
  background-color: var(--border-color-light);
  width: .1rem;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0
}

.project-item__meta dl,
.project-item__meta dt,
.project-item__meta dd {
  font-weight: var(--font-body-weight);
  margin: 0
}

.project-item__meta dt {
  font-size: var(--font-size-xsm);
  font-weight: var(--font-heading-weight);
  letter-spacing: -.025em;
  margin-top: .125em;
  margin-bottom: .125em
}

.grid-layout--list .project-item__meta dt {
  display: none
}

.project-item__meta dd {
  color: var(--global-font-color)
}

.project-item .project-item__group--heading {
  flex: 1 0 calc(50% - calc(var(--gap-inline)/2));
  position: relative
}

.project-item .project-item__group--meta {
  flex: 0 0 calc(50% - calc(var(--gap-inline)/2));
  text-align: left
}

.grid-layout:not(.grid-layout--list) .project-item .project-item__meta {
  column-gap: var(--gap-inline);
  padding-left: calc(var(--gap-inline)/2);
  display: flex
}

.project-item .project-item__meta>.project-item__meta-item {
  flex: 1 0 calc(50% - var(--gap-inline)/2);
  font-size: var(--font-size-md);
  position: relative;

  @media screen and (width<=37.5em) {
    font-size: var(--font-size-sm)
  }

  .grid-layout--list & {
    @media screen and (width>=60em) {
      font-size: var(--font-size-lg)
    }
  }
}

.project-item .project-item__meta>.project-item__meta-item:not(:first-child):before {
  content: "";
  left: calc(var(--gap-inline)/-2);
  background-color: var(--border-color-light);
  width: .1rem;
  position: absolute;
  top: 0;
  bottom: 0
}

.project-item__media {
  margin: 0 0 calc(var(--gap-block)/2);
  line-height: 0
}

.project-item__media img {
  filter: grayscale(0);
  width: 100%;
  transition: filter .35s cubic-bezier(.4, 0, .2, 1)
}

.project-item:hover .project-item__media img {
  filter: grayscale(0)
}

.grid-layout--list .project-item__media {
  display: none
}

.grid-layout {
  padding-left: calc(var(--content-padding-inline)/2);
  padding-right: calc(var(--content-padding-inline)/2);
  overflow: hidden
}

.grid-layout .project-item {
  position: relative
}

.grid-layout .project-item:before,
.grid-layout .project-item:after {
  content: "";
  top: calc(var(--gap-block)*-.25);
  right: calc(var(--gap-inline)*-.5);
  bottom: calc(var(--gap-block)*-.25);
  background-color: var(--border-color-light);
  width: .1rem;
  position: absolute;
  left: auto
}

.grid-layout .project-item:after {
  visibility: hidden
}

@media screen and (width>=37.5em) {
  .grid-layout .project-item:after {
    visibility: visible
  }
}

.grid-layout--cols-2 .project-item:nth-child(2n):after,
.grid-layout--cols-3 .project-item:nth-child(2n):after,
.grid-layout--cols-4 .project-item:nth-child(2n):after {
  visibility: hidden
}

@media screen and (width>=60em) {
  .grid-layout--cols-3 .project-item:nth-child(2n):after {
    visibility: visible
  }

  .grid-layout--cols-2 .project-item:nth-child(2n):after,
  .grid-layout--cols-3 .project-item:nth-child(3n):after,
  .grid-layout--cols-4 .project-item:nth-child(2n):after {
    visibility: hidden
  }
}

@media screen and (width>=100em) {
  .grid-layout--cols-4 .project-item:nth-child(2n):after {
    visibility: visible
  }

  .grid-layout--cols-4 .project-item:nth-child(4n):after {
    visibility: hidden
  }
}

.grid-layout .project-item:before {
  top: auto;
  bottom: calc(var(--gap-block)*-.5);
  width: 100%;
  height: .1rem;
  left: 0;
  right: 0
}

.grid-layout--list .project-item:after {
  display: none
}

.grid-layout--list .project-item .project-item__title,
.grid-layout--list .project-item .project-item__meta {
  font-size: var(--font-size-lg)
}

@media screen and (width<=37.5em) {

  .grid-layout--list .project-item .project-item__title,
  .grid-layout--list .project-item .project-item__meta {
    font-size: var(--font-size-sm)
  }
}

.grid-layout--list .project-item .project-item__group--heading,
.grid-layout--list .project-item .project-item__group--meta {
  flex: 1 0 calc(50% - calc(var(--gap-inline)/2))
}

@media screen and (width<=37.5em) {
  .grid-layout--list .project-item .project-item__group--heading {
    flex: 1 0 calc(50% - calc(var(--gap-inline)/2))
  }

  .grid-layout--list .project-item .project-item__group--meta {
    flex: 0 0 calc(50% - calc(var(--gap-inline)/2))
  }
}

.grid-layout--list .project-item .project-item__group--meta .project-item__meta {
  column-gap: var(--gap-inline);
  height: 100%;
  display: flex
}

.grid-layout--list .project-item .project-item__meta-item {
  flex: 1 0 0;
  position: relative
}

.grid-layout--list .project-item .project-item__meta-item:not(:first-child):before {
  content: "";
  top: 0;
  bottom: 0;
  left: calc(var(--gap-inline)/-2);
  background-color: var(--border-color-light);
  width: .1rem;
  position: absolute;
  right: auto
}

.project-details {
  grid-template-rows: auto;
  grid-template-columns: 1fr;
  gap: 0;
  display: grid;

  @media screen and (width>=37.5em) {
    grid-template-columns: repeat(5, 1fr)
  }

  @media screen and (width>=60em) {
    min-height: 100vh
  }

  @media screen and (width>=100em) {
    grid-template-columns: repeat(8, 1fr)
  }
}

.project-details p {
  margin: 0
}

.project-details .project-title {
  font-size: var(--font-size-xlg);

  @media screen and (width>=37.5em) {
    font-size: var(--font-size-lg)
  }
}

.project-details .project-subtitle {
  font-size: var(--font-size-md);
  font-weight: var(--font-heading-weight);
  color: var(--global-font-color-light);

  @media screen and (width>=60em) {
    font-size: calc(var(--font-size-lg)*.75)
  }
}

.project-details .project-details__header {
  padding: var(--content-padding-block)var(--content-padding-inline);
  margin-bottom: calc(var(--gap-block)*1);
  order: 1;

  @media screen and (width>=37.5em) {
    top: calc(var(--content-padding-block)*2);
    order: 1;
    grid-column: 1/span 2;
    position: sticky
  }
}

.project-details .project-details__client {
  font-weight: var(--font-heading-weight);
  color: var(--global-font-color-light)
}

.product-details__group--heading {
  padding: var(--content-padding-block)calc(var(--content-padding-inline)/2);
  order: 1;
  padding-top: 0;
  position: relative;

  @media screen and (width>=37.5em) {
    order: 2;
    grid-column: span 3
  }

  @media screen and (width>=100em) {
    order: 2;
    grid-column: span 3
  }
}

.product-details__group--meta {
  padding: var(--content-padding-block)calc(var(--content-padding-inline)/2);
  order: 3;
  padding-top: 0;
  position: relative;

  @media screen and (width>=37.5em) {
    order: 1;
    grid-column: span 2
  }

  @media screen and (width>=100em) {
    order: 1;
    grid-column: span 1
  }
}

@media screen and (width>=100em) {
  .product-details__group--inner {
    position: sticky;
    top: 6rem
  }
}

.project-details .project-details__summary {
  margin: calc(var(--content-padding-block)*2)0;
  max-width: 60ch;
  line-height: 1.75
}

.project-details__header .project-title {
  font-size: var(--font-size-lg)
}

.project-details .project-details__content {
  padding: var(--content-padding-block)calc(var(--content-padding-inline)/2);
  order: 2;
  padding-top: 0;
  position: relative;

  @media screen and (width>=37.5em) {
    order: 2;
    grid-column: span 6
  }

  @media screen and (width>=100em) {
    grid-column: span 4
  }
}

.project-details .project-details__content:before {
  content: "";
  top: 0;
  left: -.1rem;
  bottom: var(--gap-block);
  background-color: var(--border-color-light);
  width: .1rem;
  position: absolute;
  right: auto
}

.project-details figure {
  margin: 0 0 calc(var(--gap-block)/2)
}

.project-details .entry-content {
  max-width: 100%;
  margin: 0;
  padding: 0
}

@media screen and (width>=100em) {
  .project-details .entry-content {
    margin: 0
  }
}

.project-details .product-details__group--meta {
  order: 3;
  position: relative;

  @media screen and (width>=37.5em) {
    order:1;
    
    &:after {
      content: "";
      top: 0;
      bottom: var(--content-padding-block);
      background-color: var(--border-color-light);
      width: .1rem;
      position: absolute;
      left: auto;
      right: 0
    }
  }
}

.project-details .product-details__group--meta dl,
.project-details .product-details__group--meta dt,
.project-details .product-details__group--meta dd {
  font-size: var(--font-size-sm);
  font-weight: var(--font-body-weight);
  margin: 0;
  padding: 0
}

.project-details .product-details__group--meta .project-details__meta {
  column-gap: var(--gap-inline);
  row-gap: var(--gap-block);
  flex-wrap: wrap;
  grid-template-columns: repeat(3, 1fr);
  display: grid;

  @media screen and (width<=37.5em) {
    & .project-details__meta-item {
      position: relative
    }

    & .project-details__meta-item:not(:last-child):after {
      content: "";
      background-color: var(--border-color-light);
      width: .1rem;
      position: absolute;
      inset: 0 0 0 auto
    }
  }

  @media screen and (width>=37.5em) {
    grid-template-columns: repeat(1, 1fr);
    margin-top: .8rem
  }
}

.project-details img {
  width: 100%;
  line-height: 0
}

.related-projects {
  margin-top: calc(var(--gap-block)*2.5);

  @media screen and (width>=60em) {
    margin-top: calc(var(--gap-block)/-2)
  }
}

.related-projects .related-projects__title {
  padding: calc(var(--content-padding-block)/2)calc(var(--content-padding-inline)/2);
  font-size: var(--font-size-lg);
  position: relative
}

.related-projects .related-projects__title:before {
  content: "";
  top: 0;
  right: calc(var(--content-padding-inline)/2);
  bottom: autp;
  left: calc(var(--content-padding-inline)/2);
  background-color: var(--border-color-light);
  height: .1rem;
  position: absolute
}

.related-projects .project-item__title {
  font-size: var(--font-size-md)
}

.related-projects .project-item__subtitle,
.related-projects .project-item__group--meta,
.related-projects .project-item__group--meta dd {
  font-size: var(--font-size-sm)
}