/* =================================================
VOTE GRID (WIELE KOLUMN)
================================================= */

.vote-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
gap:16px;
margin-top:40px;
max-width:900px;
margin-left:auto;
margin-right:auto;
}

/* =================================================
VOTE CARD (MAŁE KAFELKI)
================================================= */

.vote-card{
background:rgba(18,20,40,.7);
border-radius:10px;
text-align:center;
text-decoration:none;
color:#fff;
border:1px solid rgba(255,255,255,.08);
transition:.25s;
backdrop-filter:blur(10px);

padding:14px 8px;

display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:4px;
}

/* IKONA */

.vote-card img{
height:32px;
width:auto;
object-fit:contain;
margin-bottom:4px;
}

/* NAZWA */

.vote-card p{
font-size:12px;
font-weight:600;
}

/* TEKST VOTE */

.vote-card span{
font-size:10px;
color:#caa65a;
letter-spacing:1px;
}

/* HOVER */

.vote-card:hover{
transform:translateY(-4px);
border-color:#caa65a;
box-shadow:0 10px 25px rgba(0,0,0,.6);
}

/* =================================================
MOBILE (WIĘCEJ W RZĘDZIE)
================================================= */

@media(max-width:600px){

.vote-grid{
grid-template-columns:repeat(3,1fr);
}

}

/* =================================================
OUR SERVERS
================================================= */

.servers-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:30px;
margin-top:40px;
}

/* KARTA */

.server-card{
background:rgba(18,20,40,.7);
border-radius:14px;
padding:30px;
text-align:center;
border:1px solid rgba(255,255,255,.08);
backdrop-filter:blur(10px);
transition:.3s;
position:relative;
}

.server-card:hover{
transform:translateY(-6px);
border-color:#caa65a;
box-shadow:0 10px 30px rgba(0,0,0,.6);
}

.server-card h2{
margin-bottom:10px;
font-size:20px;
color:#caa65a;
}

.server-card p{
font-size:14px;
color:#bbb;
margin-bottom:20px;
}

/* FUTURE SERVER */

.server-card.future{
opacity:.85;
}

.future-tag{
display:inline-block;
margin-top:10px;
font-size:12px;
letter-spacing:1px;
color:#5865F2;
}

/* =================================================
SERVERS BANNERS
================================================= */

.servers-banners{
display:flex;
flex-direction:column;
gap:25px;
align-items:center;
}

.servers-banners img{
width:100%;
max-width:900px;
border-radius:12px;
border:1px solid rgba(255,255,255,.08);
transition:.3s;
box-shadow:0 10px 30px rgba(0,0,0,.6);
}

.servers-banners img:hover{
transform:scale(1.02);
border-color:#caa65a;
box-shadow:0 15px 40px rgba(0,0,0,.7);
}