body{font-family:Arial,Helvetica,sans-serif;margin:0;background:#f7f7f7;color:#222}
.header{background:linear-gradient(135deg,#ff7ba5,#ff3f8a);color:white;text-align:center;padding:20px 20px}
.header h1{font-size:42px;margin:0}
.blog-grid{max-width:1200px;margin:auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:35px;padding:50px 20px}
.card{background:white;border-radius:16px;overflow:hidden;box-shadow:0 15px 40px rgba(0,0,0,0.12);transition:.3s}
.card:hover{transform:translateY(-6px)}
.card img{width:100%;height:220px;object-fit:cover}
.card-body{padding:22px}
.card a{text-decoration:none;color:#222}
.btn{display:inline-block;margin-top:10px;background:#ff3f8a;color:white;padding:10px 18px;border-radius:6px}
.article{max-width:900px;margin:auto;background:white;padding:40px}
.related{margin-top:40px;border-top:1px solid #eee;padding-top:20px}
.related a{display:block;margin:6px 0;color:#ff3f8a;text-decoration:none}
.article img{
display:block;
max-width:750px;
width:100%;
height:auto;
margin:40px auto;
border-radius:12px;
box-shadow:0 10px 30px rgba(0,0,0,0.15);
}
.article-toc{
background:#f7f7f7;
border:1px solid #eee;
border-radius:10px;
padding:20px;
margin:30px 0;
max-width:350px;
}

.toc-title{
font-weight:bold;
margin-bottom:10px;
font-size:18px;
}

.article-toc ul{
margin:0;
padding-left:18px;
}

.article-toc li{
margin:6px 0;
}

.article-toc a{
text-decoration:none;
color:#ff3f8a;
}

.article-toc a:hover{
text-decoration:underline;
}
.read-more{
margin-top:60px;
}

.read-more h3{
margin-bottom:20px;
}

.read-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:20px;
}

.read-grid a{
text-decoration:none;
color:#222;
background:white;
border-radius:10px;
overflow:hidden;
box-shadow:0 8px 20px rgba(0,0,0,0.1);
display:block;
}

.read-grid img{
width:100%;
height:140px;
object-fit:cover;
}

.read-grid span{
display:block;
padding:12px;
font-weight:500;
}

/* Для мобильных экранов до 768px */
@media (max-width: 768px) {
  .blog-grid .card img {
    margin-top: 20px; /* добавляет пространство сверху */
  }
  
  /* Или смещаем весь блок карточки */
  .blog-grid .card {
    margin-top: 20px;
  }
}