.church-resources{
    width:100%;
    overflow:hidden;
    font-family:"Google Sans","Segoe UI",Arial,sans-serif;
}

.church-resources .resource-row{
    margin:0;
    padding:0;
}

.church-resources .resource-col{
    padding:0;
}

.church-resources .resource-box{
    position:relative;
    min-height:88px;
    padding:9px 12px;
    display:flex;
    align-items:center;
    gap:11px;
    overflow:hidden;
    border:1px solid rgba(25,45,75,.10);
    border-radius:0px;
    transition:.35s ease;
    isolation:isolate;
}

.church-resources .resource-box::before{
    content:"";
    position:absolute;
    width:85px;
    height:85px;
    border:15px solid rgba(255,255,255,.40);
    border-radius:50%;
    right:-26px;
    top:-37px;
    z-index:-1;
}

.church-resources .resource-box::after{
    content:"";
    position:absolute;
    width:75px;
    height:30px;
    border:2px solid rgba(255,255,255,.55);
    border-radius:50%;
    right:10px;
    bottom:-19px;
    transform:rotate(-18deg);
    z-index:-1;
}

.church-resources .resource-box:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 24px rgba(22,40,75,.13);
    z-index:5;
}

.resource-img{
    width:58px;
    height:58px;
    min-width:58px;
    border-radius:50%;
    object-fit:cover;
    padding:3px;
    background:#fff;
    border:2px solid rgba(255,255,255,.95);
    box-shadow:
        0 3px 10px rgba(20,30,60,.15),
        0 0 0 3px rgba(255,255,255,.45);
}

.resource-content{
    min-width:0;
    position:relative;
}

.resource-small{
    display:block;
    font-size:10px;
    font-weight:700;
    letter-spacing:1.2px;
    text-transform:uppercase;
    color:rgba(22,44,69,.60);
    margin-bottom:2px;
}

.resource-title{
    margin:0;
    color:#17304b;
    font-size:15px;
    line-height:1.15;
    font-weight:700;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.resource-line{
    width:35px;
    height:3px;
    margin-top:6px;
    border-radius:20px;
    background:linear-gradient(90deg,#ff9d00,#ff3e71);
    position:relative;
}

.resource-line::after{
    content:"";
    position:absolute;
    width:5px;
    height:5px;
    border-radius:50%;
    background:#fff;
    right:-9px;
    top:-1px;
    box-shadow:0 0 0 2px rgba(255,255,255,.55);
}

.resource-1{
    background:
        radial-gradient(circle at 82% 25%,rgba(255,255,255,.85) 0 4px,transparent 5px),
        linear-gradient(135deg,#fff2cd,#ffe8a8);
}

.resource-2{
    background:
        repeating-linear-gradient(125deg,transparent 0 15px,rgba(255,255,255,.16) 16px 17px),
        linear-gradient(135deg,#dff8ec,#bff0dc);
}

.resource-3{
    background:
        radial-gradient(circle at 90% 60%,rgba(255,255,255,.55) 0 18px,transparent 19px),
        linear-gradient(135deg,#e5f2ff,#cce5ff);
}

.resource-4{
    background:
        linear-gradient(45deg,rgba(255,255,255,.22) 25%,transparent 25%) 0 0/20px 20px,
        linear-gradient(135deg,#f8e4ff,#ead1ff);
}

.resource-5{
    background:
        radial-gradient(circle at 78% 20%,rgba(255,255,255,.55) 0 25px,transparent 26px),
        linear-gradient(135deg,#ffe5e8,#ffd1d9);
}

.resource-6{
    background:
        repeating-linear-gradient(-45deg,transparent 0 17px,rgba(255,255,255,.20) 18px 20px),
        linear-gradient(135deg,#e8f8d3,#d5efa9);
}

.resource-1 .resource-line{background:linear-gradient(90deg,#f39c12,#ffcb45);}
.resource-2 .resource-line{background:linear-gradient(90deg,#11a36a,#42d49c);}
.resource-3 .resource-line{background:linear-gradient(90deg,#1676d2,#59a9ff);}
.resource-4 .resource-line{background:linear-gradient(90deg,#913dd1,#cd75f6);}
.resource-5 .resource-line{background:linear-gradient(90deg,#e54b61,#ff8291);}
.resource-6 .resource-line{background:linear-gradient(90deg,#62a629,#9cd45a);}

@media (min-width:1200px){
    .resource-title{
        font-size:18px;
    }

    .resource-img{
        width:54px;
        height:54px;
        min-width:54px;
    }

    .church-resources .resource-box{
        padding-left:9px;
        padding-right:9px;
        gap:8px;
    }
}

@media (max-width:767.98px){
    .church-resources .resource-box{
        min-height:80px;
        padding:7px 6px;
        gap:6px;
    }

    .resource-img{
        width:45px;
        height:45px;
        min-width:45px;
        padding:2px;
    }

    .resource-small{
        font-size:7px;
        letter-spacing:.5px;
    }

    .resource-title{
        font-size:11px;
    }

    .resource-line{
        width:24px;
        height:2px;
        margin-top:4px;
    }
}

@media (max-width:380px){
    .resource-img{
        width:40px;
        height:40px;
        min-width:40px;
    }

    .resource-title{
        font-size:13px;
    }
}