.contacts {
    margin-bottom: 100px;
    .headline {
        margin-bottom: 80px;
    }
    .items {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px 40px;
        align-items: center;
        > div {
            display: flex;
            flex-direction: column;
            gap: 10px;
            label {
                font-size: 22px;
            }
            .field {
                width: 100%;
                /* background: linear-gradient(130deg, #a5a5a5 0%, #000 100%);
                background: linear-gradient(135deg, var(--white-20) 0%, var(--dark-b) 100%); */
                /* border-radius: 16px; */
                /* backdrop-filter: blur(10px); */
                /* -webkit-backdrop-filter: blur(10px); */
                display: flex;
                gap: 20px;
                align-items: center;
                padding: 10px;
                height: 60px;
                border: 1px solid var(--white-50);
                transition: .2s linear;
                input, textarea {
                    width: 100%;
                    height: 100%;
                    background: none;
                    border: none;
                    outline: none;
                    font-size: 16px;
                    color: var(--white-70);
                    &::placeholder {
                        color: var(--white-50);
                        font-size: 16px;
                    }
                    &::-webkit-scrollbar {
                        width: 6px;
                        background: var(--white-20);
                        border-radius: 10px;
                    }
                    &::-webkit-scrollbar-thumb {
                        background: var(--blue);
                        border-radius: 10px;
                    }
                }
                textarea {
                    resize: none;
                    padding: 0;
                    border-radius: 0;
                }
                &::before {
                    font-family: icon;
                    font-size: 20px;
                    color: var(--white-70);
                }
                &:has(textarea) {
                    height: 200px;
                }
                &:has(input:focus), &:has(textarea:focus) {
                    /* box-shadow: var(--shadow-main); */
                    border: 1px solid var(--white);
                    input, textarea {
                        color: var(--white);
                    }
                    &::before {
                        color: var(--white);
                    }
                }
                &.error {
                    border: 1px solid var(--danger);
                }
            }
            &:has(textarea) {
                grid-column: span 2;
                .field {
                    padding: 20px;
                    &::before {
                        align-self: start;
                    }
                }
            }
            &.name {
                .field {
                    &::before {
                        content: '\e909';
                    }
                }
            }
            &.phone {
                .field {
                    &::before {
                        content: '\e90b';
                    }
                }
            }
            &.message {
                .field {
                    &::before {
                        content: '\e90a';
                    }
                }
            }
        }
        .btn {
            justify-self: start;
        }
    }
}
@media screen and (max-width: 1720px) {
    .contacts {
        .items {
            gap: 40px;
            > div {
                label {
                    font-size: 18px;
                }
                .field {
                    padding: 10px;
                    &::before {
                        font-size: 18px;
                    }
                    &:has(input[type="text"]), &:has(input[type="tel"]) {
                        height: 60px;
                    }
                }
            }
        }
    }
}
@media screen and (max-width: 767px) {
    .contacts {
        .headline {
            margin-bottom: 40px;
        }
        .items {
            display: flex;
            flex-direction: column;
            gap: 20px;
            width: 100%;
            > div {
                width: 100%;
                label {
                    font-size: 16px;
                }
                .field {
                    padding: 10px;
                    gap: 10px;
                    input, textarea {
                        padding: 0 10px;
                    }
                    &::before {
                        font-size: 18px;
                    }
                    &:has(input[type="text"]), &:has(input[type="tel"]) {
                        height: 50px;
                    }
                    &:has(textarea) {
                        height: 150px;
                        padding: 12px;
                    }
                }
            }
            .btn {
                align-self: start;
            }
        }
    }
}