.breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
	font-size: var(--text-base);

	> li {
		position: relative;
		display: flex;
		&:not(:last-child) {
			&:after {
				display: block;
				width: .5em;
				height: auto;
				content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 7 11"><path d="m6.054 5.854-5 5a.5.5 0 0 1-.708-.708L4.993 5.5.346.854a.5.5 0 1 1 .708-.708l5 5a.5.5 0 0 1 0 .708Z"/></svg>');
				margin-left: 1em;
				color: var(--color-gray-1);
			}
		}

		&:last-child {
			pointer-events: none;
		}

		a {
			font-weight: 600;
			color: var(--color-gray-3);
		}
	}
}

.filter-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .5rem;

  li {
    &:not(:last-child) {
      &:after {
        content: '|';
        margin-left: .5rem;
        color: var(--color-gray-4);
      }
    }
  }

  button {
    font-size: var(--text-lg);
    font-weight: 500;
    color: var(--color-gray-4);
    cursor: pointer;
    background-color: transparent;
    border: none;
    transition: all .3s;

    &:hover,
    &.active {
      color: var(--color-black-1);
    }

    &.active {
      pointer-events: none;
    }
  }
}

.projects-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  @media (width >= 768px) {
    grid-template-columns: repeat(2, 1fr);
  }
  @media (width >= 1400px) {
    grid-template-columns: repeat(3, 1fr);
  }

  .proyecto {
    position: relative;
    aspect-ratio: 16/11;
    overflow: hidden;

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

    .overlay {
      position: absolute;
      top: 50%;
      left: 50%;
      translate: -50% -50%;
      width: 100%;
      height: 100%;
      background-color: rgb(from var(--color-black-1) r g b / 1);
      opacity: .75;
      z-index: 0;
      transition: all .5s;
    }
    
    .content {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 1rem;
      padding: 1rem;
      color: var(--color-white);
      text-align: center;
      z-index: 1;
      transition: all .5s;
      
      .badges {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 1rem;
        justify-content: space-between;
        width: 100%;

        .project-location {
          font-size: var(--text-base);
          font-weight: 400;
        }
        .project-year {
          font-size: var(--text-sm);
          font-weight: 400;
        }
      }
      
      .project-title {
        font-size: var(--heading-h3);
        font-weight: 400;
        color: var(--color-white);
      }

    }
    
    .overlay-link {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 2;
    }

    @media (width >= 992px) {
      .overlay {
        width: 95%;
        height: 95%;
        opacity: 0;
      }

      .content-wrap {
        padding: 2rem;
        opacity: 0;
        translate: 0 5%;
      }

      &:hover {
        .overlay {
          width: 100%;
          height: 100%;
          opacity: .75;
        }
        .content {
            width: 100%;
            opacity: 1;
            translate: 0;
            opacity: 1;
            translate: 0;
           .content-wrap {
              width: max-content;
              display: flex;
              align-items: center;
              flex-direction: column;
              opacity: 1;
          }
        }
       
      }

    }
  }
}