.projects-hero {
    position: relative;
}

.projects-hero::before {
    content:    '';
    position:   absolute;
    inset:      0;
    background: linear-gradient(27090deg, #3f8f46 0%, #6dc170 100%);
}

.projects-hero .container {
    position:  relative;
    max-width: 1680px;
}

.projects-hero .breadcrumbs { margin-bottom: 0; }
.projects-hero .breadcrumbs__link { color: rgba(255, 255, 255, .5); }
.projects-hero .breadcrumbs__link:hover { color: #ffffff; }
.projects-hero .breadcrumbs__sep { color: rgba(255, 255, 255, .5); }
.projects-hero .breadcrumbs__current { color: #ffffff; }

.projects-hero__inner {
    display:         flex;
    flex-direction:  column;
    gap:             40px;
    padding:         20px 0 40px;
}

.projects-hero__intro {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            16px;
    max-width:      1140px;
    margin:         0 auto;
    text-align:     center;
}

.projects-hero__title {
    margin:      0;
    font-size:   48px;
    font-weight: 700;
    line-height: 52px;
    color:       #ffffff;
}

.projects-hero__text {
    margin:      0;
    font-size:   18px;
    font-weight: 500;
    line-height: 24px;
    color:       #ffffff;
}

@media (max-width: 1024px) {
    .projects-hero__inner { gap: 20px; padding: 40px 0; }

    .projects-hero__intro { max-width: 100%; }

    .projects-hero__title { font-size: 36px; line-height: 42px; }

    .projects-hero__text { line-height: 22px; }
}

@media (max-width: 767px) {
    .projects-hero__inner { gap: 20px; padding: 20px 0; }

    .projects-hero__intro { gap: 12px; }

    .projects-hero__title { font-size: 24px; line-height: 28px; }

    .projects-hero__text { font-size: 16px; line-height: 20px; }
}

.projects-grid {
    padding:    60px 0 80px;
    overflow-x: hidden;
}

.projects-grid .container {
    max-width: 1180px;
}

.projects-grid__items {
    display:      grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap:   20px;
    row-gap:      40px;
}

@media (max-width: 1024px) {
    .projects-grid { padding: 40px 0 60px; }

    .projects-grid__items { grid-template-columns: 1fr; row-gap: 20px; }
}

@media (max-width: 767px) {
    .projects-grid { padding: 20px 0 40px; }
}