@media (max-width: 1023px) {
    .banner {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 50px; /* Stała wysokość banera */
        background-size: cover; /* Dopasowanie obrazu do szerokości ekranu */
        background-repeat: no-repeat;
        background-position: top left; /* Obraz zawsze w lewym górnym rogu */
        z-index: 1000;
        transition: transform 0.3s ease-in-out;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding-left: 220px;
        padding-right: 10px;
        box-sizing: border-box;
        overflow: hidden;
        cursor: pointer;
        pointer-events: all;
    }

    .banner.hidden {
        transform: translateY(-100%);
    }

    /* Dodajemy przestrzeń pod banerem, gdy jest widoczny */
    .with-banner-padding {
        padding-top: 50px;
    }

    .banner-text {
        color: #911bbc;
        font-family: 'Archivo', sans-serif;
        font-weight: bold;
        font-size: 1.5rem;
        line-height: 1.2;
        /*max-width: calc(100% - 220px);*/
        text-align: left;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    @media (max-width: 768px) {
        .banner-text {
            font-size: 1.2rem;
        }
    }

    @media (max-width: 600px) {
        .banner-text {
            font-size: 1rem;
        }
    }

    @media (max-width: 400px) {
        .banner-text {
            font-size: 0.8rem;
        }
    }
}

/* Ukrywamy baner na ekranach szerszych niż 1023px */
@media (min-width: 1024px) {
    .banner {
        display: none !important;
    }

    .with-banner-padding {
        padding-top: 0 !important;
    }
}