.mk-guides{

    display:flex;
    flex-direction:column;
    gap:18px;

}

.mk-guide-card{

    display:flex;

    text-decoration:none;
    color:inherit;

    background:#111111;

    border:1px solid #2a2a2a;

    border-radius:14px;

    overflow:hidden;

    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;

}

.mk-guide-card:hover{

    transform:translateY(-3px);

    border-color:var(--mk-orange);

    box-shadow:0 10px 30px rgba(255,122,0,.12);

}

.mk-guide-image{

    width:150px;

    flex-shrink:0;

}

.mk-guide-image img{

    width:100%;
    height:100%;

    object-fit:cover;

    display:block;

}

.mk-guide-content{

    flex:1;

    padding:18px 22px;

    display:flex;

    flex-direction:column;

}

.mk-guide-badge{

    display:inline-block;

    background:rgba(255,122,0,.15);

    color:var(--mk-orange);

    padding:5px 10px;

    border-radius:6px;

    font-size:12px;

    font-weight:700;

    margin-bottom:10px;

}

.mk-guide-content h3{

    margin:0 0 8px;

    font-size:22px;

}

.mk-guide-excerpt{

    color:var(--mk-text-muted);

    margin:0;

    flex:1;

}

.mk-guide-footer{

    margin-top:15px;

    color:#777;

    font-size:14px;

}

.mk-guide-bottom{

    display:flex;
    justify-content:space-between;
    align-items:center;

    margin-top:auto;

}

.mk-guide-reading{

    display:flex;

    align-items:center;

    gap:6px;

    color:var(--mk-text-muted);

    font-size:14px;

    margin-right:20px;

}

.mk-guide-new{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    margin-left:8px;

    padding:4px 8px;

    border-radius:6px;

    background:#27ae60;

    color:#fff;

    font-size:12px;

    font-weight:700;

}

.mk-guide-header{

	display:flex;

	align-items:center;

	gap:8px;

	margin-bottom:10px;

}

.mk-guide-date{

    display:flex;

    align-items:center;

    gap:6px;

    color:var(--mk-text-muted);

    font-size:14px;

}

.mk-guide-reading svg,
.mk-guide-date svg{

    width:15px;

    height:15px;

    stroke:var(--mk-text-muted);

    flex-shrink:0;

}


.mk-guide-meta{

	display:flex;
	align-items:center;
	gap:20px;

}

.mk-guide-author,
.mk-guide-reading,
.mk-guide-date{

	display:flex;
	align-items:center;
	gap:6px;

	color:var(--mk-text-muted);
	font-size:14px;

}

.mk-guide-author svg,
.mk-guide-reading svg,
.mk-guide-date svg{

	width:15px;
	height:15px;

	stroke:var(--mk-text-muted);

	flex-shrink:0;

}

.mk-guide-author{
    background:red;
}

.mk-guide-meta{
    background:blue;
}

.mk-guide-bottom{
    background:green;
}