.projects {
  margin-bottom: 10rem;
}

.projects__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  column-gap: clamp(1rem, 4vw, 5rem);
  row-gap: 9.375rem;

  @media (max-width: 900px) {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 4rem;
  }
}

.projects__label {
  color: var(--base-color-dark);
  font-size: clamp(1.25rem, 2.5vw, 2.5rem);
  font-weight: 400;
}

.projects__title {
  color: var(--base-color-dark);
  font-size: clamp(3rem, 8vw, 8rem);
  font-weight: bold;
  position: relative;
  display: inline-block;
  margin-top: 2rem;
  margin-bottom: 2rem;
  isolation: isolate;
  width: fit-content;

  @media (max-width: 900px) {
    padding: 0rem;
  }
  &::before {
    content: "";
    position: absolute;
    top: 70%;
    left: -15%;
    right: -10%;
    height: 3.75rem;
    background-image: url("../assets/img/scribbles/nav-projects.svg");
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: left center;
    animation: fill-left-right 4s ease-in-out infinite;
    filter: var(--highlight-filter-color-1-green);

    @media (max-width: 900px) {
      top: 60%;
      height: 3rem;
    }
  }
}

.projects__text {
  display: flex;
  color: var(--base-color-dark);
  font-size: 1.5rem;
  justify-content: flex-start;
  font-weight: 300;

  @media (max-width: 900px) {
    font-size: 1.25rem;
  }
}

.project-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 37.5rem;

  @media (max-width: 900px) {
    width: 100%;
    max-width: 100%;
  }
}

.project-card__stage {
  position: relative;
  width: 100%;
}

.project-card__sticker {
  display: none;
  position: absolute;
  z-index: 5;
  top: 65%;
  left: 1.5625rem;
  width: 11.25rem;
  height: 15.625rem;
  transform: translateY(-50%) rotate(-10deg);
  pointer-events: none;

  @media (max-width: 900px) {
    width: 8rem;
    height: 8rem;
    top: 85%;
  }
}

.project-card__sticker-image {
  width: 100%;
  height: 100%;
  background-image: url("../assets/img/stickers/round/projects-sticker.webp");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.project-card__media {
  position: relative;
  overflow: hidden;
  border-radius: 1.125rem;

  @media (max-width: 900px) {
    overflow: visible;
  }
}

.project-card__image {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.4s ease;
  border-radius: 1.125rem;

  .project-card__media:hover & {
    transform: scale(1.1);

    @media (max-width: 900px) {
      transform: none;
    }
  }
}

.project-card__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 1.5rem;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.4) 0%,
    rgba(0, 0, 0, 0.2) 30%,
    transparent 65%
  );

  opacity: 0;
  transition: opacity 0.4s ease;
  border-radius: 1.5rem;

  @media (max-width: 900px) {
    display: none;
  }

  .project-card__media:hover & {
    opacity: 1;
  }
}

.project-card__action {
  display: none;

  @media (max-width: 900px) {
    display: inline-block;
    align-self: flex-end;
    margin-top: 1rem;
    color: var(--base-color-bright);
    background-color: var(--highlight-color-3-blue);
    border-color: black;
  }
}

.project-card__title {
  display: flex;
  margin-top: 1rem;
  margin-bottom: 1rem;
  font-size: 1.75rem;
}

.project-card__text {
  display: block;
  font-size: 1.25rem;

  @media (max-width: 900px) {
    font-size: 1rem;
  }
}

.projects__intro + .project-card--featured {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: none;
}

.projects__intro + .project-card--featured .project-card__stage {
  margin-bottom: clamp(2rem, 5vw, 5rem);
}

.project-card--featured .project-card__sticker {
  display: block;
}

.projects__intro + .project-card--featured .project-card__media {
  position: relative;
  border-radius: var(--border-radius-button);
  cursor: pointer;
  animation: float 3s ease-in-out infinite;
  margin-left: auto;
  width: 100%;
  overflow: visible;
}

.projects__intro + .project-card--featured .project-card__media:hover {
  animation-play-state: paused;
}

.projects__intro + .project-card--featured .project-card__image {
  width: 100%;
  display: block;
  transition: transform 0.4s ease;
  border-radius: var(--border-radius-button);

  @media (max-width: 900px) {
    overflow: visible;
    padding-top: 2rem;
  }
}

.projects__intro
  + .project-card--featured
  .project-card__media:hover
  .project-card__image {
  transform: scale(1.1) translateX(-40px);

  @media (max-width: 900px) {
    transform: none;
  }
}

.projects__intro + .project-card--featured .project-card__title {
  margin-bottom: 1rem;
  font-weight: 500;
  font-size: clamp(1.25rem, 2.5vw, 2.5rem);

  @media (max-width: 900px) {
    margin-top: 1rem;
    margin-bottom: 1rem;
    font-size: 1.75rem;
    font-weight: bold;
  }
}

.projects__intro + .project-card--featured .project-card__text {
  display: block;
  font-size: 1.5rem;
  font-weight: 300;

  @media (max-width: 900px) {
    font-size: 1rem;
    font-weight: 400;
  }
}

@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-30px);
  }
  100% {
    transform: translateY(0px);
  }
}