.projects {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: #03131e;
}

.projects::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(57, 184, 236, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(57, 184, 236, 0.045) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
}

.projects .wrap {
  position: relative;
}

.projects .projects-head {
  margin-bottom: 40px;
}

.projects .projects-head h2 {
  color: #fff;
  font-size: clamp(48px, 4.4vw, 70px);
  line-height: 1.02;
}

.projects .projects-head h2 em {
  color: var(--blue);
  font-style: normal;
}

.projects .button-outline-dark {
  min-height: 60px;
  color: #fff;
  border-color: rgba(21, 151, 208, 0.65);
}

.projects .button-outline-dark:hover {
  color: #fff;
  background: var(--blue);
}

.projects .project-gallery {
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 345px;
  gap: 16px;
}

.projects .project-gallery figure,
.projects .project-gallery .project-wide {
  grid-column: span 1;
  grid-row: span 1;
  margin: 0;
  border: 1px solid rgba(57, 184, 236, 0.32);
  border-radius: 4px;
  background: #061a27;
}

.projects .project-gallery .project-wide {
  grid-column: 1 / -1;
  height: 310px;
}

.projects .project-gallery img {
  filter: brightness(0.78) saturate(0.88);
}

.projects .project-gallery .project-wide img {
  object-position: center 58%;
}

.projects .project-gallery figcaption {
  inset: auto 0 0;
  min-height: 118px;
  padding: 48px 72px 20px 24px;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  background: linear-gradient(transparent, rgba(3, 18, 28, 0.98));
}

.projects .project-gallery figcaption::before {
  position: absolute;
  top: 26px;
  left: 24px;
  color: var(--blue2);
  font-size: 14px;
}

.projects .project-gallery figure:nth-child(1) figcaption::before { content: "01"; }
.projects .project-gallery figure:nth-child(2) figcaption::before { content: "02"; }
.projects .project-gallery figure:nth-child(3) figcaption::before { content: "03"; }
.projects .project-gallery figure:nth-child(4) figcaption::before { content: "04"; }

.projects .project-gallery figcaption::after {
  content: "↗";
  position: absolute;
  right: 22px;
  bottom: 22px;
  width: 42px;
  height: 42px;
  display: grid;
  place-content: center;
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 50%;
  font-size: 17px;
}

.projects .project-gallery figcaption strong {
  font-size: 20px;
  font-weight: 600;
}

.projects .project-gallery figcaption span {
  color: #b9c6cc;
}

@media (max-width: 980px) {
  .projects .project-gallery {
    grid-template-columns: repeat(2, 1fr);
  }

  .projects .project-gallery figure:nth-child(3) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .projects .projects-head h2 {
    font-size: 44px;
  }

  .projects .project-gallery {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: 330px;
  }

  .projects .project-gallery figure,
  .projects .project-gallery figure:nth-child(3),
  .projects .project-gallery .project-wide {
    grid-column: 1;
    height: 330px;
    margin: 0;
  }
}