.promo-box {
    .content {
        max-width: 820px;
        margin-bottom: 10px;
        > * {
            font-size: 24px;
            font-weight: 700;
            line-height: 1.4;
            letter-spacing: 0.048px;
        }
    }
    .promo-text {
        width: fit-content;
        display: flex;
        flex-direction: column;
        gap: 6px;
        margin-left: -100vw;
        padding: 20px 20px 20px 100vw;
        border: 1px solid var(--white);
        border-left: none;
        background: rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(10px);
        > * {
            max-width: 800px;
            font-size: 20px;
            font-weight: 300;
            line-height: 1.4;
            letter-spacing: 0.04px;
        }
    }
}
.projects {
    overflow: hidden;
    form {
        display: flex;
        flex-direction: column;
        gap: 20px;
        border-bottom: 1px solid #d5d5d5;
        margin-right: -100vw;
        padding: 0 100vw 10px 0;
        &:has(.buttons button.active) {
            .content-box {
                grid-template-rows: 1fr;
            }
            .content {
                grid-template-rows: 1fr auto;
            }
        }
        &:has(.buttons button:first-child.active) .content fieldset {
            &[name="industries"] {
                opacity: 1;
                pointer-events: all;
            }
        }
        &:has(.buttons button:last-child.active) .content fieldset {
            &[name="practices"] {
                opacity: 1;
                pointer-events: all;
            }
        }
        .buttons {
            display: flex;
            align-items: center;
            gap: 10px;
            .white-btn {
                border-color: var(--2);
                padding-inline: 50px;
                &::before {
                    background-color: var(--white);
                }
                .text-h b {
                    color: var(--text);
                    display: flex;
                    align-items: center;
                    gap: 6px;
                    &::after {
                        content: '\e908';
                        font: 100 10px/1 icon;
                        padding: 2px 4px 0;
                        transition: transform .3s linear;
                    }
                }
                &.active {
                    &::before {
                        transform: translateY(0);
                        background-color: var(--2);
                    }
                    .text-h b {
                        color: var(--white);
                        &::after {
                            transform: rotate(180deg);
                        }
                    }
                }
            }
        }
        .active-filters {
            display: grid;
            grid-template-columns: 1fr max-content;
            align-items: start;
            &:has(.list:empty) {
                display: none;
            }
            .list {
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                gap: 10px 20px;
                width: fit-content;
                margin-right: 20px;
                div {
                    display: flex;
                    align-items: center;
                    gap: 4px;
                    border: none;
                    padding: 2px 2px 2px 8px;
                    color: var(--5);
                    line-height: 1.4;
                    letter-spacing: 0.032px;
                    background: var(--f9);
                    transition: color var(--tz);
                    button {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        background: none;
                        border: none;
                        width: 24px;
                        aspect-ratio: 1;
                        flex-shrink: 0;
                        transition: background-color var(--tz), color var(--tz);
                        &::before {
                            content: '\e914';
                            font: 100 10px/1 icon;
                        }
                    }
                }
                &:has(div) + .clear {
                    display: block;
                }
            }
            .clear {
                display: none;
                padding-block: 3px;
                color: var(--2);
                line-height: 1.4;
                letter-spacing: 0.032px;
                background: none;
                border: none;
                transition: color .3s linear;
            }
        }
        .content-box {
            overflow: hidden;
            display: grid;
            grid-template-rows: 0fr;
            transition: grid-template-rows var(--tz);
        }
        .content {
            display: grid;
            grid-template-rows: 0fr auto;
            align-items: start;
            transition: grid-template-rows var(--tz);
            row-gap: 20px;
            overflow: hidden;
        }
        fieldset {
            grid-area: 1/1;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px 20px;
            border: none;
            overflow: hidden;
            opacity: 0;
            pointer-events: none;
            transition: opacity .3s linear .3s;
        }
        button[type="submit"] {
            width: fit-content;
            padding-inline: 50px;
        }
    }
    .projects-list {
        display: flex;
        flex-direction: column;
        gap: 40px;
        .items {
            display: grid;
            grid-template-columns: .26fr .074fr .166fr .166fr .074fr .26fr;
            grid-auto-rows: 280px;
            gap: 20px;
            margin-top: 30px;
        }
    }
    .not-found {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 50px;
        margin-bottom: 0px;
    }
    .project {
        position: relative;
        overflow: hidden;
        padding: 20px;
        display: flex;
        flex-direction: column;
        background-color: var(--f7);
        img,
        .logo {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
        img {
            max-width: 200px;
        }
        .logo {
            text-align: center;
            text-wrap: balance;
            width: min(350px, calc(100% - 40px));
            color: var(--2);
            text-shadow: 0 24px 10px rgba(0, 0, 0, 0.01), 0 13px 8px rgba(0, 0, 0, 0.05), 0 6px 6px rgba(0, 0, 0, 0.09), 0 1px 3px rgba(0, 0, 0, 0.1);
            font-size: 20px;
            font-weight: 1000;
            line-height: 1;
            letter-spacing: 0.048px;
            text-transform: uppercase;
            padding: 56px 20px;
            /* word-break: break-word; */
            hyphens: auto;   
            background:
                url(../images/projects/angle1.webp) left top / auto no-repeat,
                url(../images/projects/angle2.webp) right bottom / auto no-repeat,
                url(../images/projects/lines.svg) center center;
        }
        > .title {
            margin-top: auto;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            line-clamp: 1;
            -webkit-line-clamp: 1;
            color: var(--5);
            font-size: 16px;
            font-weight: 500;
            line-height: 1.4;
            letter-spacing: 0.032px;
            overflow: hidden;
        }
        > a {
            position: absolute;
            inset: 0;
        }
        .box {
            position: absolute;
            inset: 0;
            display: flex;
            flex-direction: column;
            gap: 4px;
            padding: inherit;
            background: rgba(144, 0, 32, 0.9);
            backdrop-filter: blur(1px);
            transform: translateY(100%);
            transition: transform var(--tz);
            * {
                color: var(--white);
            }
            .title {
                font-size: 20px;
                font-weight: 500;
                line-height: 1.4;
                letter-spacing: 0.04px;
            }
            .content {
                display: -webkit-box;
                -webkit-box-orient: vertical;
                line-clamp: 2;
                -webkit-line-clamp: 2;
                overflow: hidden;
                font-size: 16px;
                font-weight: 300;
                line-height: 1.4;
                letter-spacing: 0.032px;
                * {
                    display: contents;
                    font-size: inherit;
                    line-height: inherit;
                    font-weight: inherit;
                    letter-spacing: inherit;
                }
            }
            a {
                position: relative;
                width: 32px;
                height: 32px;
                display: flex;
                align-items: center;
                justify-content: center;
                z-index: 1;
                margin: auto 0 0 auto;
                &::before {
                    content: '\e90e';
                    font: 100 26px/1 icon;
                }
            }
        }
    }
    .show-more {
        display: flex;
        align-items: center;
        gap: 4px;
        align-self: center;
        background: none;
        border: none;
        color: var(--2);
        font-weight: 300;
        letter-spacing: -0.2px;
        transition: color var(--tz);
        &::after {
            content: '\e908';
            font: 100 10px / 1 icon;
            padding: 2px 4px 0;
        }
    }
}
@media (min-width: 1280px) {
    .project {
        &:nth-child(10n - 8) {
            grid-column: span 4;
        }
        &:nth-child(10n - 6),
        &:nth-child(10n - 5) {
            grid-column: span 3;
        }
        &:nth-child(10n - 4),
        &:nth-child(10n - 3),
        &:nth-child(10n - 2) {
            grid-column: span 2;
        }
        &:nth-child(10n - 1),
        &:not(:first-child):nth-child(10n) {
            grid-column: span 3;
        }
    }
}
@media (max-width: 1280px) {
    .projects {
        .projects-list .items {
            grid-template-columns: .2772fr .1712fr .1832fr .0912fr .2772fr;
        }
        .not-found {
            padding: 30px;
        }
        .project {
            &:nth-child(4n - 3),
            &:nth-child(4n) {
                grid-column: span 2;
            }
            &:nth-child(4n - 2),
            &:nth-child(4n - 1) {
                grid-column: span 3;
            }
        }
    }
}
@media (hover: none) and (pointer: coarse),
(max-width: 1080px) {
    .projects {
        .projects-list .items {
            grid-auto-rows: auto;
        }
        .project {
            img,
            .logo {
                position: static;
            }
            img {
                transform: none;
                margin: auto;
            }
            .logo {
                width: min(350px, calc(100% - 40px));
                margin-inline: auto;
                transform: none;
                padding-left: 12px;
                padding-right: 12px;
                font-size: 16px;
            }
            > .title {
                display: none;
            }
            .box {
                position: static;
                margin-top: auto;
                padding: 20px 0 0;
                background: none;
                backdrop-filter: none;
                transform: none;
                transition: none;
                .title {
                    font-size: 16px;
                }
                * {
                    font-size: 14px;
                    color: var(--text);
                }
                a {
                    display: none;
                }
            }
        }
    }
}
@media (max-width: 1080px) {
    .promo-box {
        padding: 100px 0px 70px;
        & .content {
            > * {
                font-size: 20px;
            }
        }
        > * {
            font-size: 16px;
        }
    }
    .projects {
        .projects-list {
            gap: 30px;
            .items {
                grid-template-columns: repeat(2, 1fr);
                gap: 10px;
                margin-top: 20px;
            }
        }
        .not-found {
            padding: 20px;
        }
        form {
            .buttons .white-btn {
                padding-inline: 30px;
                width: min(300px, 100%);
            }
            fieldset {
                grid-template-columns: 1fr;
            }
        }
        .project {
            &:nth-child(4n - 3),
            &:nth-child(4n),
            &:nth-child(4n - 2),
            &:nth-child(4n - 1) {
                grid-column: initial;
            }
        }
    }
}
@media (max-width: 768px) {
    .promo-box {
        padding: 70px 0px 20px;
        & .content {
            > * {
                font-size: 16px;
            }
        }
        .promo-text {
            * {
                font-size: 16px;
            }
        }
    }
    .projects {
        .projects-list .items {
            grid-template-columns: 1fr;
        }
        .not-found {
            padding: 10px;
        }
    }
}
@media (hover:hover) {
    .projects {
        form .active-filters {
            .list div:hover {
                color: var(--text);
                button {
                    background-color: var(--2);
                    color: var(--white);
                }
            }
            .clear:hover {
                color: var(--text);
            }
        }
        .project:hover .box {
            transform: translateY(0);
        }
        .show-more:hover {
            color: var(--text);
        }
    }
}