/* Projects */
@media (min-width: 1200.98px) {
  .projects-section {
    position: relative;
    padding-bottom: var(--block-space);

    &:before {
      content: "";
      position: absolute;
      left: 50%;
      right: 0;
      bottom: 0;
      border-bottom: 1px solid;
    }

    &:after {
      content: "";
      position: absolute;
      left: 50% !important;
      bottom: 0 !important;
      width: 16px;
      height: 16px;
      background: currentColor;
      transform: translate(-50%, 50%);
      border: none !important;
      right: auto !important;
    }
  }

  .projects-section .projects.slick-initialized {
    display: block !important;
  }

  .projects-section .slick-arrow {
    display: none !important;
  }

  .projects-section .slick-track {
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap;
    row-gap: 20px;
    transform: none !important;
  }

  .projects-section .slick-slide {
    width: 25% !important;
  }

  .projects-section .slick-slide.slick-cloned {
    display: none !important;
  }
}

.projects {
  --gutter-y: 40px;
  display: flex;
  flex-wrap: wrap;
  margin-left: calc(-0.5 * var(--gutter-x));
  margin-right: calc(-0.5 * var(--gutter-x));
  margin-top: calc(-1 * var(--gutter-y));
}

.projects.slick-initialized {
  display: block;
  margin: 0;
}

.projects .slick-list {
  margin-left: calc(-0.5 * var(--gutter-x));
  margin-right: calc(-0.5 * var(--gutter-x));
}

.projects .slick-list .projects__item {
  margin-top: 0;
}

.projects_type_box {
  --gutter-y: 20px;
}

.projects__item {
  flex: 0 0 auto;
  width: 25%;
  padding-left: calc(0.5 * var(--gutter-x));
  padding-right: calc(0.5 * var(--gutter-x));
  margin-top: var(--gutter-y);
}

@media (max-width: 991.98px) {
  .projects__item {
    width: 33.33%;
  }
}

@media (max-width: 767.98px) {
  .projects__item {
    width: 50%;
  }
}

@media (max-width: 575.98px) {
  .projects__item {
    width: 100%;
  }
}

.project-item {
  display: block;
  color: inherit;
  text-decoration: none;
  position: relative;
}

.project-item:hover,
.project-item:active {
  color: inherit;
  text-decoration: none;
}

.project-item__image-wrapper {
  position: relative;
  margin-bottom: 20px;
}

.project-item__image-wrapper:before {
  content: "";
  display: block;
  padding-top: calc(240 * 100% / 305);
}

.project-item__image {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.project-item__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-item__image:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(31, 31, 31, 0.96);
}

.project-item__image:after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1;
  width: 60px;
  height: 60px;
  background-color: var(--accent-color);
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M42 30.5 37 34v-2.825H18v-1h19V27l5 3.5Z' fill='%231F1F1F'/%3E%3C/svg%3E");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.project-item__image:before,
.project-item__image:after {
  opacity: 0;
  visibility: hidden;
  transition: 0.35s ease-in-out;
}

@media (hover: hover) {
  .project-item:hover .project-item__image:before,
  .project-item:hover .project-item__image:after {
    opacity: 1;
    visibility: visible;
  }
}

.project-item:active .project-item__image:before,
.project-item:active .project-item__image:after {
  opacity: 1;
  visibility: visible;
}

.project-item__title {
  font-size: 20px;
  line-height: 1.4em;
  letter-spacing: 0.035em;
  font-weight: 400;
  margin-bottom: 13px;
}

.project-item__title > small {
  display: block;
  font-size: 0.7em;
  line-height: 1.57;
  letter-spacing: 0;
  color: inherit;
}

@media (max-width: 1199.98px) {
  .project-item__title {
    font-size: 18px;
  }

  .project-item__image:after {
    width: 50px;
    height: 50px;
  }
}

.project-item_type_box:before {
  content: "";
  display: block;
  padding-top: calc(409 * 100% / 345);
}

.project-item_type_box .project-item__image-wrapper {
  position: absolute;
  margin: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.project-item_type_box .project-item__image-wrapper:before {
  display: none;
}

.project-item_type_box .project-item__image:after {
  right: 0;
  bottom: 0;
  margin: 0;
}

.project-item_type_box .project-item__content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 17px 20px;
  color: var(--color, var(--main-color));
  height: 84px;
  overflow: hidden;
  transition: 0.35s ease-in-out;
}

@media (hover: hover) {
  .project-item_type_box:hover .project-item__content {
    height: 100%;
    color: var(--white-color);
  }
}

.project-item_type_box:active .project-item__content {
  height: 100%;
  color: var(--white-color);
}

.project-item_type_box .project-item__title {
  color: inherit;
  margin: 0;
}

@media (hover: hover) {
  .project-item_type_box:hover .project-item__title {
    color: inherit;
  }
}

.project-item_type_box:active .project-item__title {
  color: inherit;
}

.project-item_type_box .project-item__text {
  font-size: 13px;
  line-height: 20px;
  margin-top: 10px;
  color: inherit;
  opacity: 0;
  visibility: hidden;
  transition: 0.15s ease-in-out;
  transition-property: opacity, visibility;
}

@media (hover: hover) {
  .project-item_type_box:hover .project-item__text {
    opacity: 1;
    visibility: visible;
  }
}

.project-item_type_box:active .project-item__text {
  opacity: 1;
  visibility: visible;
}

@media (max-width: 1199.98px) {
  .project-item_type_box .project-item__content {
    height: 74px;
    padding: 15px;
  }
}
/* ! Projects */