body{background-color:#f5f5f5;}


#blog{margin:60px 0;}


#blog .pagegrid{
    display:grid;grid-template-columns:1fr 280px;gap:40px;
    
}
#blog .pagegrids{}
#blog .pagegrids.s1{}
#blog .pagegrids.s1 .kategoriler1{margin:0 0 20px 0;}
#blog .pagegrids.s1 .kategoriler1 a{display:inline-block;padding:7px 20px;background:#fff;border-bottom:2px solid transparent;transition:all 0.2s;}
#blog .pagegrids.s1 .kategoriler1 a:hover{background:#fbc7d5;}
#blog .pagegrids.s1 .kategoriler1 a.selected{background:#fff;border-color:#cf8988;}
#blog .pagegrids.s1 .list{
    margin:30px 0 0 0;
    display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;
}
#blog .pagegrids.s1 .list .item{position:relative;z-index:1;padding:20px;background:#fff;border-radius:15px;}
#blog .pagegrids.s1 .list .item:before{
    content:"";position:absolute;top:0;left:0;right:0;bottom:0;z-index:-1;
    opacity:0.3;box-shadow:0 0 20px 1px #444;border-radius:15px;
    transition:all 1s;
}
#blog .pagegrids.s1 .list .item:hover:before{opacity:1;}
#blog .pagegrids.s1 .list .item a.img{
    position:relative;z-index:1;display:block;aspect-ratio:1 / 1;
    background:#000;border-radius:15px;overflow:hidden;
}
#blog .pagegrids.s1 .list .item a.img img{
    position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;opacity:0.7;transition:all 1s;
}
#blog .pagegrids.s1 .list .item:hover a.img img{opacity:1;}
#blog .pagegrids.s2{}

@media only screen and (max-width:1050px){
    #blog .pagegrid{grid-template-columns:1fr;gap:60px;}
    #blog .pagegrids.s1 .list{grid-template-columns:1fr 1fr 1fr 1fr;gap:10px;}
    #blog .pagegrids.s1 .list .item{padding:10px;}
}
@media only screen and (max-width:650px){
    #blog .pagegrids.s1 .list{grid-template-columns:1fr 1fr;gap:10px;}
}