body {
    background:#efefef;
}

.mu-portfolio-wrap {
    max-width:1200px;
    margin:0 auto;
    padding:40px 40px 120px;
}

.mu-header {
    margin-bottom:70px;
}

.mu-header h1 {
    font-family:Georgia, "Times New Roman", serif;
    font-size:48px;
    font-weight:normal;
    color:#9e1b1b;
    margin-bottom:16px;
}

.mu-header p {
    max-width:700px;
    font-size:18px;
    line-height:1.7;
    color:#222;
}

.mu-filters {
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    margin-bottom:50px;
}

.mu-filter {
    background:none;
    border:none;
    border-bottom:1px solid transparent;
    font-size:16px;
    cursor:pointer;
    padding:0;
    color:#333;
    font-family:Georgia, "Times New Roman", serif;
}

.mu-filter.active,
.mu-filter:hover {
    border-color:#9e1b1b;
    color:#9e1b1b;
}

.mu-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(420px,1fr));
    gap:70px 50px;
}

.mu-card {
    transition:opacity 0.3s ease;
}

.mu-card:hover {
    opacity:0.92;
}

.mu-card img {
    width:100%;
    display:block;
    margin-bottom:20px;
}

.mu-network {
    font-size:12px;
    letter-spacing:1px;
    text-transform:uppercase;
    margin-bottom:10px;
    color:#666;
}

.mu-card h2 {
    font-family:Georgia, "Times New Roman", serif;
    font-size:34px;
    font-weight:normal;
    line-height:1.2;
    margin-bottom:18px;
    color:#111;
}

.mu-card p {
    font-size:17px;
    line-height:1.8;
    color:#222;
    margin-bottom:26px;
}

.mu-player {
    width:100%;
    height:180px;
    border:none;
    margin-bottom:18px;
}

.mu-listen-link {
    color:#9e1b1b;
    text-decoration:none;
    border-bottom:1px solid #9e1b1b;
    padding-bottom:2px;
}

.mu-listen-link:hover {
    opacity:0.8;
}

@media(max-width:768px){

    .mu-grid {
        grid-template-columns:1fr;
        gap:50px;
    }

    .mu-header h1 {
        font-size:38px;
    }

    .mu-card h2 {
        font-size:28px;
    }

    .mu-portfolio-wrap {
        padding:30px 24px 80px;
    }
}