.container {
    width: 100%;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
    margin-right: auto;
    margin-left: auto;
    position: relative;
    overflow-x: hidden !important;

}






@media (max-width:500px) {
    header img {
        width: 100%;
    }
}


@media (min-width:350px) {
    .swiper {
        width: 250px;
        height: 250px;

    }
}
@media (min-width:400px) {
    .swiper {
        width: 300px;
        height: 300px;

    }
}


@media (min-width: 576px) {
    .top-header {
        justify-content: space-between;
        gap: 1.5rem;

    }

    .top-header #date {
        display: block;
    }

    .wrapper {
        grid-template-columns: repeat(2, 1fr);
    }
}



@media (min-width: 768px) {
    header {
        flex-direction: row;

    }
}


@media (min-width: 992px) {
    header {
        gap: 4rem;
    }

    .wrapper {
        grid-template-columns: repeat(4, 1fr);
    }
}



@media (min-width: 1200px) {
    .container {
        width: 1100px;
    }



}

@media (min-width: 1400px) {
    .container {
        width: 1300px;
    }

}