.proyecto-main {
  .heading-proyecto {
    margin-bottom: 3rem;
    font-family: var(--fonts-paragraph);

    .category {
      text-align: center;
      padding: var(--button-padding);
      background-color: var(--color-principal);
      width: max-content;
      margin: 0;
      border-radius: var(--button-radius);
    }

    ul {
      list-style: none;
      margin: 0;
      position: relative;

      li::before{
        content: "-";
        font-size: 1rem;
        font-weight: bold;
        position: absolute;
        left: 14px;
      }

      .sede {
        text-decoration: underline;
        text-underline-offset: 4px;
        font-weight: 700;
        font-family: var(--fonts-paragraph);
      }
    }
  }

  .content-proyecto {
    margin-bottom: 5rem;
    padding: 2rem 1rem;


    .proyect-gallery {
      height: 45rem;
      margin-bottom: 2rem;

      @media (width < 992px) {
        height: 30rem;
      }

      @media (width < 576px) {
        height: 25rem;
      }

      .proyecto-swiper {
        width: 100%;
        height: 100%;

        .swiper-slide {
          display: flex;
          align-items: center;
          justify-content: center;
          background-color: #f5f5f5;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }

        .swiper-button-next,
        .swiper-button-prev {
          color: var(--color-principal);
          
          &:after {
            font-size: 2rem;
            font-weight: bold;
          }
        }

        .swiper-pagination {
          .swiper-pagination-bullet {
            background-color: var(--color-principal);
            opacity: 0.5;
          }

          .swiper-pagination-bullet-active {
            opacity: 1;
          }
        }
      }
    }


    .info {
      .info-content {
        padding: 40px;

        p,
        h3 {
          margin-bottom: 1.5rem;
        }

        h3{
          color: var(--color-azul);
        }
      }

      .content-bottom {
        position: relative;

        &::before{
          content: "";
          position: absolute;
          width: 90%;
          height: 2px;
          background-color: var(--color-azul);
          top: 0;

        }

        .to-icon{
          color: var(--color-azul);
          font-size: 2rem;
        }
      }

      .content-left {
        height: 100%;
        background-color: #ECE6D5;

        .lista-info{
          padding: 0;
          margin: 0;
        }

        p,
        .lista-info{
          margin: 1.5rem 0;
        }
      }
    }
  }
}

@media (width < 992px) {
  .content-proyecto {
    .info {
      padding: 0;
    }

    .info-right {
      margin-top: 1.5rem;
    }
  }
}

@media (width < 768px) {
  .proyectos-relacionados {
    img {
      margin-top: 1.7rem;
    }
  }
}

@media (width < 576px) {
  .proyecto-main {
    .content-proyecto {
      border: none;
      padding: 0;

      .info {
        .info-content {
          padding: 15px;
        }
      }
    }
  }
}