.przyciski-lata {
    width: 100%;
    max-width: 1100px;
    margin: 25px auto;

    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    gap: 6px;

    box-sizing: border-box;
}


/* =====================================================
   PRZYCISK
   ===================================================== */

.przycisk-rok {

    flex: 1 1 70px;

    min-width: 50px;
    max-width: 70px;

    height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    border: 1px solid #888;
    border-radius: 0px;

    background: #d2d2d2;

    color: #222;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px;
    font-weight: normal;

    text-decoration: none;

    box-shadow:
        0 1px 2px rgba(0,0,0,0.18);

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


/* =====================================================
   NAJECHANIE
   ===================================================== */

.przycisk-rok:hover {

    background: #c2c2c2;

    border-color: #707070;

    box-shadow:
        0 2px 4px rgba(0,0,0,0.22);
}


/* =====================================================
   NACIŒNIÊCIE
   ===================================================== */

.przycisk-rok:active {

    background: #b7b7b7;

    box-shadow:
        inset 0 1px 3px rgba(0,0,0,0.18);
}


/* =====================================================
   PRZYCISK AKTYWNY
   ===================================================== */

.przycisk-rok.aktywny {

    background: #858585;

    color: #fff;

    border-color: #626262;

    box-shadow:
        inset 0 1px 2px rgba(0,0,0,0.20);
}


/* =====================================================
   AKTYWNY + NAJECHANIE
   ===================================================== */

.przycisk-rok.aktywny:hover {

    background: #797979;

    border-color: #555;
}


/* =====================================================
   FOKUS KLAWIATURY
   ===================================================== */

.przycisk-rok:focus-visible {

    outline: 2px solid #555;
    outline-offset: 2px;
}


/* =====================================================
   MNIEJSZY EKRAN
   ===================================================== */

@media (max-width: 700px) {

    .przyciski-lata {
        gap: 7px;
    }

    .przycisk-rok {

        flex: 1 1 75px;

        max-width: 100px;

        font-size: 20px;
    }
}


/* =====================================================
   TELEFON
   ===================================================== */

@media (max-width: 480px) {

    .przyciski-lata {
        gap: 6px;
    }

    .przycisk-rok {

        flex: 1 1 70px;

        min-width: 70px;

        height: 40px;

        font-size: 19px;
    }
}