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 .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;
    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;transition:transform 1s;
}
#blog .pagegrids.s1 .list .item:hover a.img img{transform:scale(1.15);}
#blog .pagegrids.s1 .list .item a.name{display:block;padding:15px 0 0 0;font-size:1.1rem;}
#blog .pagegrids.s2{}
#blog .pagegrids.s2 .kategoriler{padding:20px;margin:0 0 25px 0;box-shadow:0 0 4px 0 #aaa;}
#blog .pagegrids.s2 .kategoriler .title{font-family:'ivymode';font-size:1.1rem;}
#blog .pagegrids.s2 .kategoriler .list{margin:20px 0 0 0;}
#blog .pagegrids.s2 .kategoriler .list .item{margin:0 0 4px 0;}
#blog .pagegrids.s2 .kategoriler .list .item a{}
#blog .pagegrids.s2 .kategoriler .list .item a i{color:#cf8988;}
#blog .pagegrids.s2 .kategoriler .list .item a:hover{color:#000;}
#blog .pagegrids.s2 .kategoriler .list .item a:hover i{color:#000;}

@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;}
}