.resource-section{
    width:85%;
    margin:140px auto 70px;
}

.resource-section h2{
    display:inline-block;
    font-size:34px;
    margin-bottom:35px;
    position:relative;
}

.resource-section h2::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-8px;
    width:100%;
    height:4px;
    border-radius:20px;
    background:linear-gradient(90deg,#8b5cf6,#4f7cff);
}

.resource-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
    gap:35px;
    align-items:start;
}

.resource-card{
    position:relative;
    overflow:hidden;
    border-radius:20px;
    background:#17172a;
    box-shadow:var(--shadow);
    transition:.35s;
    width:100%;
    max-width:280px;
}

.resource-card:hover{
    transform:translateY(-8px);
}

.resource-card img{
    width:100%;
    aspect-ratio:1 / 1;
    object-fit:cover;
}

.resource-info{
    padding:18px;
}

.resource-info h3{
    font-size:24px;
    margin-bottom:12px;
}

.resource-info p{
    color:#c8c8de;
    line-height:1.7;
    margin-bottom:22px;
}

.download-btn{
    display:block;
    width:100%;
    text-align:center;
    padding:12px;
    border-radius:12px;
    background:linear-gradient(135deg,#7b5cff,#4e83ff);
    color:white;
    font-weight:600;
    transition:.35s;
}

.download-btn:hover{
    transform:translateY(-3px);
    box-shadow:0 0 20px rgba(120,100,255,.5);
}

/* Shining animation */

.shine{
    position:absolute;
    top:-100%;
    left:-50%;
    width:40%;
    height:250%;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.35),
        transparent
    );
    transform:rotate(25deg);
    animation:cardShine 4s linear infinite;
    pointer-events:none;
}

@keyframes cardShine{

0%{
left:-70%;
}

20%{
left:150%;
}

100%{
left:150%;
}

}

.resource-card.hover{
    transform:translateY(-8px);
}