@media only screen and (min-width:200px) and (max-width:575px) {


    header {
        position: sticky;
        top: 0px;
    }

    .header-left i {
        display: none;
    }

    .header-left {
        display: block;
    }

    .header-right>p,
    button {
        display: none;
    }

    .header-right>i {
        display: block;
        font-size: 20px;
        color: white;
    }

    .click-bar {
        margin: 20px 10px;
        width: 300px;
        display: none;
    }

    .click-bar input {
        width: 100%;
        font-size: 18px;
        background-color: #1f1f1f;
        padding: 5px;
    }

    .click-bar button {
        color: white;
    }

    .logo {
        display: flex;
        align-items: center;
        gap: 10px;
        /* display: block; */
    }

    .logo h3 {
        font-size: 20px;
        display: block;
        color: whitesmoke;
    }

    .search-bar {
        display: none;
    }

    h2 {
        font-size: 20px;
    }

    main {
        flex-direction: column;
    }

    .main-left {
        overflow: unset;
        order: 2;
    }

    .main-left-scroller {
        height: auto;
    }

    .main-right {
        padding: 10px;
    }

    .main-right {
        height: auto;
        overflow: unset;
        order: 1;
    }

    .main-right-item {
        justify-content: center;
    }

    .main-right-items {
        flex-basis: 45%;
    }

    .main-right-items img {
        width: 100%;
        height: 140px;
    }

    .album-items {
        flex-basis: 100%;
    }



    .album-items img {
        height: auto;
    }

    .event {
        display: none;
    }

    footer {
        margin: 0px;
        justify-content: center;
    }

    footer ul {
        flex-basis: 45%;
    }

}

@media only screen and (min-width:576px) and (max-width:992px) {


    header {
        position: sticky;
        top: 0px;
    }

    .header-left i {
        display: none;
    }

    .header-left {
        display: block;
    }

    .header-right>p,button {
        display: none;
    }

    .header-right>i {
        display: block;
        font-size: 20px;
        color: white;
    }

    .click-bar {
        margin: 20px 10px;
        width: 300px;
        display: none;
    }

    .click-bar input {
        width: 100%;
        font-size: 18px;
        background-color: #1f1f1f;
        padding: 5px;
    }

    .click-bar button {
        color: white;
    }

    .logo {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 80px;
    }
    .logo img {
        width: 100%;
    }

    .logo h3 {
        display: none;
    }

    .search-bar {
        display: none;
    }

    h2 {
        font-size: 20px;
    }

    main {
        flex-direction: column;
    }

    .main-left {
        overflow: unset;
        order: 2;
    }

    .main-left-scroller {
        height: auto;
    }

    .main-right {
        padding: 10px;
    }

    .main-right-item {
        justify-content: center;
    }

    .main-right {
        height: auto;
        overflow: unset;
        order: 1;
    }

    .main-right-item {
        align-items: center;
    }

    .main-right-items {
        flex-basis: 45%;
        justify-content: center;
    }

    .main-right-items img {
        width: 100%;
        height: 300px;
    }

    .album-items img {
        height: auto;
    }

    .album-items {
        flex-basis: 45%;
    }

    .event {
        display: none;
    }

    footer {
        margin: 0px;
        justify-content: center;
    }

    footer ul {
        flex-basis: 45%;
    }

}