.projects_banner {
  position: relative;
  overflow: hidden;
}
.projects_banner.img_bg > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}
.projects_banner .content {
  position: relative;
  z-index: 1;
  width: 100%;
}
.projects_banner .content > .flex {
  min-height: 42rem;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 14rem 0 8rem;
}
.projects_banner .tcon {
  max-width: 70rem;
  text-align: left;
}
.projects_banner .tcon p {
  max-width: 62rem;
  color: #46536b;
}
.projects_banner .title {
  color: #0b2a6b;
}
.projects_main {
  padding: 8rem 0 12rem;
}
.projects_list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.4rem;
}
.projects_list .item {
  display: block;
  height: 100%;
  background: #fff;
  border-radius: 1.6rem;
  overflow: hidden;
  border: 1px solid #d4dae3;
}
.projects_list .img {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/11;
}
.projects_list .img span {
  position: absolute;
  left: 1.6rem;
  top: 1.6rem;
  z-index: 1;
  background: var(--primary);
  color: #fff;
  font-size: 1.2rem;
  letter-spacing: 0.08em;
  padding: 0.4rem 1rem;
  border-radius: 0.4rem;
}
.projects_list .info {
  padding: 2.2rem 2.4rem 2.6rem;
}
.projects_list .info strong {
  display: block;
  font-size: 2.2rem;
  color: var(--secondary);
}
.projects_list .info p {
  margin: 1rem 0 1.8rem;
  color: #46536b;
  font-family: Inter, sans-serif;
}
.projects_list .items {
  display: flex;
  gap: 1.6rem;
}
.projects_list .item_con strong {
  font-size: 1.8rem;
}
.projects_list .item_con span {
  display: block;
  font-size: 1.2rem;
  letter-spacing: 0.08em;
  color: #7a8699;
}
@media screen and (max-width: 1024px) {
  .projects_list {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 768px) {
  .projects_banner .content > .flex {
    min-height: 28rem;
    padding: 10rem 0 5rem;
  }
  .projects_list {
    grid-template-columns: 1fr;
  }
}