.featured-projects {
  display: flex;
  background-color: #fff;
  /* width: calc(100svh - 402px * var(--scale)); */
  width: 35vw;
}

.featured {
  position: relative;
  height: 100svh;
  width: 35vw;
}

.featured::after {
  content: '';
  background-color: #000;
  opacity: 0.06;
  position: absolute;
  right: 0;
  top: 0;
  width: calc(1px * var(--scale));
  height: 100%;
}

.featured:nth-child(2)::after {
  right: calc(1px * var(--scale));
}

.featured.hidden {
  display: none;
}

.featured-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.featured-background {
  width: 100%;
  height: 100%;
  background-color: #fff;
  position: absolute;
  top: 0;
  left: 0;
}

.featured-image-container {
  flex: none;
  position: relative;
  /* width: calc(100svh - 402px * var(--scale)); */
  width: 35vw;
  aspect-ratio: 1;
  overflow: hidden;
}

.featured-image-container,
.image-img {
  transition: height 300ms ease;
  /* height: calc(100svh - 402px * var(--scale)); */
  height: 35vw;
}

.featured-image,
.featured-image-container-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.featured-content {
  height: 100%;
  padding: var(--offset);
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.featured-content-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: calc(var(--offset) / 2);
  min-height: calc(20px * var(--scale));
}

.featured-right {
  display: flex;
  align-items: center;
  gap: calc(10px * var(--scale));
}

.featured-count {
  font-size: calc(12px * var(--scale));
  font-weight: 500;
  opacity: 0.5;
}

.featured-disc {
  width: calc(20px * var(--scale));
  height: calc(20px * var(--scale));
}

.featured-year {
  font-size: calc(16px * var(--scale));
  font-weight: 600;
}

.featured-title {
  font-size: calc(40px * var(--scale));
  font-weight: 500;
  margin-bottom: calc(var(--offset) / 2);
}

.featured-items {
  display: flex;
  flex-direction: column;
  gap: calc(4px * var(--scale));
  margin-bottom: calc(57px * var(--scale));
  position: relative;
  overflow: hidden;
}

.featured:not(.expanded) .featured-items {
  height: calc((23px * 3 + 4px * 2) * var(--scale));
  min-height: calc((23px * 3 + 4px * 2) * var(--scale));
}

.featured.expanded .featured-items {
  height: calc((23px * 9 + 4px * 8) * var(--scale));
  min-height: calc((23px * 9 + 4px * 8) * var(--scale));
}

.featured.expanded .featured-footer-chevron {
  transform: rotate(180deg);
}

.featured.expanded .featured-items::after {
  opacity: 0;
  visibility: hidden;
}

/* .featured-items::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc(33px * var(--scale));
  background: linear-gradient(180deg, transparent, #fff);
  opacity: 1;
  visibility: visible;
  z-index: 100;
  transition: opacity 300ms ease;
}

.featured-content:has(.featured-content-inner:hover) .featured-items::after {
  background: linear-gradient(180deg, transparent, #000);
} */

.featured-item {
  font-size: calc(15px * var(--scale));
  line-height: calc(23px * var(--scale));
  position: relative;
}

.featured-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: calc(22px * var(--scale));
  margin-top: auto;
}

.featured-footer__left {
  display: flex;
  align-items: center;
  gap: var(--offset);
}

.featured-footer__select {
  display: flex;
  align-items: center;
  gap: calc(4px * var(--scale));
}

.featured-footer-text {
  font-size: calc(12px * var(--scale));
  letter-spacing: calc(1.5px * var(--scale));
  font-weight: 500;
  text-transform: uppercase;
}

.featured-footer-chevron {
  width: calc(16px * var(--scale));
  height: calc(16px * var(--scale));
  transition: transform 300ms ease;
}

.featured-footer__right {
  display: flex;
  align-items: center;
  gap: calc(12px * var(--scale));
}

.featured-footer-subtext {
  font-size: calc(12px * var(--scale));
  font-weight: 500;
  opacity: 0.5;
}

.circle {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -5rem 0 0 -5rem;
  width: 10rem;
  height: 10rem;
  border-radius: 200rem;
  background: #000;
  z-index: 1;
}

.circle.hidden {
  visibility: hidden;
  backface-visibility: hidden;
}

.featured-content-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.featured-content *:not(.featured-content-inner) {
  pointer-events: none;
}

.featured-content-header,
.featured-title,
.featured-item,
.featured-items,
.featured-footer,
.featured-disc {
  mix-blend-mode: difference;
  z-index: 10;
}

.featured-content-header,
.featured-title,
.featured-item,
.featured-footer {
  color: #fff;
}

.featured-disc path {
  stroke: #fff;
}

.featured-image-container::after,
.project-image-container::after {
  content: '';
  opacity: 0;
  background-color: #000;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: all 300ms ease;
}

body:not(.mobile) .featured-image-container:hover::after,
body:not(.mobile) .project-image-container:hover::after {
  opacity: 0.5;
}

.featured:nth-child(3),
.projects-item {
  margin-left: calc(-1px * var(--scale));
}