@media (max-width: 1300px) {
    .page-section {
        width: 90%;
        max-width: none;
    }
    .hero-section {
        padding: 5rem 0;
    }
}
@media (max-width: 1100px) {
    .page-header {
        font-size: 35px;
    }
    .post-side-small {
        width: 70%;
    }
    .post-side-large-img {
        min-width: 200px;
        width: 50%;
    }
}
@media (max-width: 970px) {
    .topics {
        flex-direction: column;
        gap: 2rem;
    }
    .hero-section {
        padding-bottom: 2rem;
    }
    .page-h2.topic-header {
        text-align: center;
    }
    .hero-sub-text {
        max-width: none;
    }
    .posts-wrapper-top {
        flex-direction: column;
    }
    .post-side-large {
        width: 100%;
    }
    .post-side-small {
        width: 100%;
    }
    .post-side-small-img {
        height: 200px;
    }
    .post-side-large-img {
        height: auto;
    }
    #search-input {
        width: 100%;
        max-width: none;
    }
}
@media (max-width: 570px) {
    .post-side-small {
        flex-direction: column;
    }
    .post-side-small-img {
        height: 150px;
    }
    .post-side-small-img {
        height: 225px;
    }
    .post-side-small-info, .post-info {
        padding: 25px 20px;
    }
    .post-side-large {
        flex-direction: column;
    }
    .post-side-large-img, .post-img {
        max-width: none;
        width: 100%;
        height: 250px;
    }
    .posts-wrapper-bottom {
        flex-direction: column;
    }
    .post {
        width: 100%;
    }
    .post-side-large-info {
        background-color: #1E3050;
    }
    .post-side-large-info .post-header, .post-description {
        color: white;
    }
}
@media (max-width: 500px) {
    .page-h2 {
        font-size: 25px;
    }
    .hero-sub-text {
        font-size: 17px;
    }
    .topic-img-wrapper {
        width: 180px;
        height: 180px;
    }
   
}
@media (max-width: 480px) {
    
}