/* ==========================================================================
   Projetos — carrossel de mídias + logos
   ========================================================================== */

.projects {
  position: relative;
  width: 100%;
  min-width: 0;
  padding: 4.7222vw 0 3.8264vw;
  display: flex;
  flex-direction: column;
  min-height: 64.7222vw;
  overflow: hidden;
  background-color: var(--color-pink);
}

.projects__headline {
  position: relative;
  width: 94.4444vw;
  display: block;
  z-index: 2;
  font-size: 0;
  text-align: center;
  margin: 0 auto;
}

.projects__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 8.3333vw;
  color: var(--color-black);
  line-height: 1.06;
  display: inline;
}

.projects__title-accent {
  font-family: var(--font-serif);
  font-weight: 200;
  font-size: 6.9444vw;
  color: var(--color-black);
  line-height: 1.06;
  display: inline;
}

.projects__title-end {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 8.3333vw;
  color: var(--color-black);
  line-height: 1.06;
  display: inline;
}

.projects__stamp {
  width: 19.7222vw;
  position: absolute;
  top: 23.5431vw;
  right: 0.7472vw;
  z-index: 5;
  font-family: var(--font-script);
  font-weight: 400;
  font-size: 2.0833vw;
  color: var(--color-black);
  line-height: 1.15;
  text-align: center;
  transform: rotate(-6.99deg);
}

.projects__carousel {
  position: relative;
  width: 100%;
  display: block;
  margin: 1.3611vw 0 0;
  overflow: auto hidden;
  scrollbar-width: none;
  touch-action: pan-y; /* vertical swipes still scroll the page */
  cursor: grab;
}

.projects__track {
  position: relative;
  width: max-content;
  min-width: 0;
  display: flex;
  transform: translate(-7.8472vw, 0);
  gap: 1.25vw;
}

.projects__card {
  position: relative;
  width: 23.4028vw;
  display: block;
  height: 27.9861vw;
  overflow: hidden;
  line-height: 0;
  cursor: pointer;
  border-radius: var(--radius-media);
  background-color: var(--color-black);
  flex: 0 0 auto;
}

.projects__media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.projects__media--video {
  max-width: 100vw;
  aspect-ratio: auto;
}

.projects__logos {
  position: relative;
  width: 100%;
  display: block;
  overflow: hidden;
  margin: 4.7222vw 0 0;
}

.projects__logo-track {
  list-style: none;
  position: relative;
  width: max-content;
  min-width: 0;
  padding: 0;
  display: flex;
  margin: 0 0 0 2.9271vw;
  gap: 3.8417vw;
  align-items: center;
}

.projects__logo-track > li {
  flex: 0 0 auto;
}

.projects__logo {
  display: block;
  flex: 0 0 auto;
  /* Every logo file has the same canvas height with the mark optically
     balanced inside, so one height fits all. */
  width: auto;
  height: 4.2986vw;
}

/* Mobile */
@media (max-width: 767px) {
  .projects {
    min-height: 135vw;
    padding: 11.75vw 0 11.2368vw;
  }

  .projects__headline {
    width: 92.2727vw;
  }

  .projects__title {
    font-size: 9.0909vw;
  }

  .projects__title-accent {
    font-size: 7.2727vw;
  }

  .projects__title-end {
    font-size: 9.0909vw;
  }

  .projects__stamp {
    width: 92.0455vw;
    position: relative;
    top: auto;
    right: auto;
    font-size: 4.5454vw;
    margin: 5.2046vw auto 0;
    transform: rotate(0deg);
  }

  .projects__carousel {
    margin: 5.1136vw 0 0;
  }

  .projects__track {
    transform: translate(-38.4091vw, 0);
    gap: 2.9545vw;
  }

  .projects__card {
    width: 48.4091vw;
    height: 57.9545vw;
  }

  .projects__logos {
    margin: 8.8636vw 0 0;
  }

  .projects__logo-track {
    margin: 0 0 0 -0.4546vw;
    gap: 9.0523vw;
  }

  .projects__logo {
    height: 10.1291vw;
  }

}

/* Carousel interaction (see js/modules/projects-carousel.js) */
.projects__carousel::-webkit-scrollbar {
  display: none;
}

.projects__carousel.is-dragging {
  cursor: grabbing;
}

.projects__card img,
.projects__card video {
  -webkit-user-drag: none;
  user-select: none;
}