.posts {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 24px;
    padding: 50px 20px;
    @media (max-width: 900px) {
        display: flex;
        padding: 20px 0 0 0;
        flex-direction: column-reverse;
    }
}
.postsPageWrapper{
    display: flex;
    flex-direction: column;
    gap: 40px;
    @media (max-width: 700px) {
        gap: 20px;
    }
}
.postsHeader {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}
.postsWrapper {
    display: grid;
    gap: 20px;
}
.postsWrapper.search{
    display: flex;
    flex-direction: column;
}
.postsContent {
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.postsTitle {
    font-size: clamp(18px, 3vw, 24px);
}
.textGroup {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.input {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}
.postsButton {
    padding: 5px 12px;
    width: max-content;
}