.credits-page{
    background:#17181b
}

.credits-page .site-header{
    position:relative
}

.credits-hero{
    padding:90px max(28px,calc((100vw - 1120px)/2)) 75px;
    background:radial-gradient(circle at 78% 35%,rgba(255,206,72,.12),transparent 30%)
}

.credits-hero h1{
    margin:18px 0;
    font:400 clamp(58px,9vw,105px)/.9 "Bowlby One SC";
    letter-spacing:-3px
}

.credits-hero>p:last-child{
    max-width:650px;
    color:#b9bbc2;
    font-size:17px;
    line-height:1.7
}

.credits-content{
    padding:65px max(28px,calc((100vw - 1120px)/2)) 110px;
    background:#1d1e21
}

.credits-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:14px
}

.credit-card{
    display:grid;
    grid-template-columns:50px 1fr;
    gap:20px;
    min-height:250px;
    padding:28px;
    border:1px solid #38393e;
    border-radius:4px;
    background:linear-gradient(145deg,#202125,#18191c)
}

.credit-card>span{
    color:#ffce48;
    font:400 14px "Bowlby One SC"
}

.credit-card h2{
    margin:0 0 12px;
    font:400 27px "Bowlby One SC"
}

.credit-card p{
    min-height:48px;
    color:#aeb0b7;
    line-height:1.6
}

.credit-card ul{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin:24px 0 0;
    padding:0;
    list-style:none
}

.credit-card li{
    padding:9px 12px;
    border:1px solid #3b3c41;
    border-radius:3px;
    background:#151619;
    color:#fff;
    font-size:12px;
    font-weight:700
}

.credits-note{
    margin:35px 0 0;
    color:#92949b;
    font-size:12px
}

.credits-error{
    color:#ff6573
}

@media(max-width:700px){
    .credits-hero{
        padding:60px 18px
    }

    .credits-hero h1{
        font-size:52px
    }

    .credits-content{
        padding:45px 18px 80px
    }

    .credits-grid{
        grid-template-columns:1fr
    }

    .credit-card{
        min-height:0
    }

}