.ikar-music {
    max-width: 1180px;
    margin: 0 auto;
    padding-bottom: 7rem;
}

.music-heading {
    padding: 4rem 0 3rem;
}

.music-kicker {
    color: #ff541f;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .18em;
}

.music-heading h1 {
    margin: .5rem 0 1rem;
    color: #ffffff;
    font-size: clamp(3rem, 7vw, 5rem);
    line-height: 1;
}

.music-intro {
    max-width: 720px;
    color: #999999;
    font-size: 1.05rem;
    line-height: 1.7;
}

.music-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.6rem;
}

.music-card {
    display: block;
    overflow: hidden;
    background: #0d0d0d;
    border: 1px solid #242424;
    border-radius: 16px;
    color: #ffffff;
    text-decoration: none;
    transition:
        transform .2s ease,
        border-color .2s ease,
        background .2s ease;
}

.music-card:hover {
    transform: translateY(-4px);
    border-color: #ff541f;
    background: #141414;
}

.music-cover {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #141414;
}

.music-cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.music-cover-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    background:
        radial-gradient(
            circle at 75% 20%,
            rgba(255, 84, 31, .32),
            transparent 42%
        ),
        linear-gradient(
            135deg,
            #080808 0%,
            #170d09 100%
        );
}

.music-cover-placeholder span {
    color: #ffffff;
    font-size: 2.2rem;
    font-weight: 800;
    letter-spacing: .18em;
}

.music-card-content {
    padding: 1.5rem;
}

.music-meta {
    color: #ff541f;
    font-size: .73rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.music-meta span {
    color: #777777;
}

.music-card h2 {
    margin: .65rem 0 1.8rem;
    color: #ffffff;
    font-size: 1.55rem;
}

.music-open {
    color: #999999;
    font-size: .92rem;
    transition: color .2s ease;
}

.music-card:hover .music-open {
    color: #ff541f;
}

@media (max-width: 900px) {
    .music-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .music-grid {
        grid-template-columns: 1fr;
    }

    .music-heading {
        padding-top: 2.5rem;
    }
}