/* ===========================
   FUNSTEAM PREMIUM VİTRİN V2
=========================== */

.grid-container-1{
display:grid;
grid-template-columns:100%;
gap:12px;
}

.grid-container-2{
display:grid;
grid-template-columns:50% 50%;
gap:12px;
}

.grid-container-3{
display:grid;
grid-template-columns:33.333% 33.333% 33.333%;
gap:12px;
}

.grid-container-4{
display:grid;
grid-template-columns:25% 25% 25% 25%;
gap:12px;
}

.grid-container-5{
display:grid;
grid-template-columns:20% 20% 20% 20% 20%;
gap:12px;
}

.vitrin-div{
background:transparent;
padding:5px;
}

/* ÇERÇEVELER */

.grid-item img.aniborder1{
border:2px solid #ff5b8f;
border-radius:18px;
}

.grid-item img.aniborder2{
border:2px solid #56c6ff;
border-radius:18px;
}

.grid-item img.aniborder3{
border:2px solid #ffd257;
border-radius:18px;
}

/* KART */

.grid-item{

background:#fff;

padding:2px;

margin:4px;

border-radius:18px;

overflow:hidden;

border:1px solid #ececec;

box-shadow:0 8px 25px rgba(0,0,0,.10);

transition:.35s;

text-align:center;

position:relative;

}

.grid-item:hover{

transform:translateY(-5px);

box-shadow:0 15px 35px rgba(0,0,0,.18);

}

/* FOTO */

.grid-item img{

width:100%;

display:block;

transition:.35s;

}

.grid-item:hover img{

transform:scale(1.04);

}

/* İSİM */

.name-item{

background:linear-gradient(135deg,#ff3d77,#ff7a18);

color:#fff;

padding:10px;

font-size:13px;

font-weight:700;

text-align:center;

letter-spacing:.3px;

}

/* KONUM */

.place-item{

background:#fafafa;

color:#555;

padding:9px;

font-size:12px;

text-align:center;

border-top:1px solid #eee;

}

/* FOTO */

.resimKapsayici{

position:relative;

overflow:hidden;

}


/* TABLET */

@media(max-width:992px){

.grid-container-5,
.grid-container-4{

grid-template-columns:33.333% 33.333% 33.333%;

}

}

/* MOBİL */

@media(max-width:768px){

.grid-container-5,
.grid-container-4,
.grid-container-3{

grid-template-columns:50% 50%;

}

.name-item{

font-size:12px;

padding:8px;

}

.place-item{

font-size:11px;

}

.resimYazisi{

font-size:18px;

}

}

/* TELEFON */

@media(max-width:500px){

.grid-container-5,
.grid-container-4,
.grid-container-3,
.grid-container-2{

grid-template-columns:100%;

}

}
/* MOBİLDE DEĞİŞME */

@media (max-width:768px){

.grid-container-5{
grid-template-columns:20% 20% 20% 20% 20%;
}

.grid-container-4{
grid-template-columns:25% 25% 25% 25%;
}

.grid-container-3{
grid-template-columns:33.333% 33.333% 33.333%;
}

.grid-container-2{
grid-template-columns:50% 50%;
}

.grid-container-1{
grid-template-columns:100%;
}

}
.status-item{

display:flex;

justify-content:space-between;

align-items:center;

padding:8px;

background:#fff;

border-top:1px solid #eee;

font-size:11px;

}

.status-item .online{

color:#18b663;

font-weight:bold;

}

.status-item .vip{

color:#ff9800;

font-weight:bold;

}

@media(max-width:768px){

.status-item{

flex-direction:column;

gap:4px;

font-size:10px;

}

}
