.audio-ads-wrap-frontend{
    --aad-cols-m: 1;
    --aad-cols-t: 2;
    --aad-cols-d: 3;
    --aad-gap: 24px;
    --aad-card-radius: 12px;
}

.aad-title{
    max-width: 100%;
    margin: 0 auto 22px auto;
    display:block;
}

.aad-grid{
    display:grid;
    grid-template-columns: repeat(var(--aad-cols-m), minmax(0, 1fr));
    gap: var(--aad-gap);
}

@media (min-width: 700px){
    .aad-grid{ grid-template-columns: repeat(var(--aad-cols-t), minmax(0, 1fr)); }
}
@media (min-width: 1024px){
    .aad-grid{ grid-template-columns: repeat(var(--aad-cols-d), minmax(0, 1fr)); }
}

.aad-card{
    position:relative;
    border-radius: var(--aad-card-radius);
    overflow:hidden;
    min-height: 280px;
    display:block;
    text-decoration:none !important;

    box-shadow: 0 10px 30px rgba(0,0,0,0.14);
    transform: translateY(0);
    transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
    will-change: transform;
    isolation:isolate;
}

.aad-card:hover{
    transform: translateY(-6px);
    box-shadow: 0 18px 45px rgba(0,0,0,0.20);
}

.aad-bg-color,
.aad-bg-image{
    position:absolute;
    inset:0;
    z-index:1;
}

.aad-bg-image{
    background-size:cover;
    background-position:center;
}

.aad-content{
    position:relative;
    z-index:3;
    height:100%;
    width:100%;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding: 22px 18px;
}

.aad-card-title{
    display:block;
    line-height:1.15;
    font-weight:700;
    text-shadow: 0 4px 12px rgba(0,0,0,0.25);
    margin-top: 10px;
}

.aad-btn-wrap{
    display:flex;
}
.aad-align-left{ justify-content:flex-start; }
.aad-align-center{ justify-content:center; }
.aad-align-right{ justify-content:flex-end; }

.aad-btn{box-sizing:border-box;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding: 10px 14px;
    border: 1px solid rgba(255,255,255,0.22);
    backdrop-filter: blur(2px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.18);
    transition: transform .2s ease, filter .2s ease, opacity .2s ease;
}

.audio-ads-wrap-frontend[data-float="1"] .aad-card{
    animation: aadFloat 4.4s ease-in-out infinite;
}
.audio-ads-wrap-frontend[data-float="1"] .aad-card:nth-child(2n){
    animation-duration: 5.2s;
}
.audio-ads-wrap-frontend[data-float="1"] .aad-card:nth-child(3n){
    animation-duration: 4.8s;
}
@keyframes aadFloat{
    0%,100%{ transform: translateY(0); }
    50%{ transform: translateY(-10px); }
}

.audio-ads-wrap-frontend[data-shake="1"] .aad-card:active{
    animation: aadShake .25s linear 1;
}
@keyframes aadShake{
    0%{ transform: translateX(0); }
    25%{ transform: translateX(-4px) rotate(-0.6deg); }
    50%{ transform: translateX(4px) rotate(0.6deg); }
    75%{ transform: translateX(-3px) rotate(-0.4deg); }
    100%{ transform: translateX(0); }
}

.aad-pagination{
    margin-top: 18px;
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    justify-content:center;
}

.aad-page{
    display:inline-flex;
    min-width:36px;
    height:36px;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    border:1px solid rgba(0,0,0,0.12);
    text-decoration:none !important;
    background:#fff;
    box-shadow: 0 6px 16px rgba(0,0,0,0.10);
}

.aad-page.is-active{
    font-weight:700;
    transform: translateY(-1px);
}


.aad-btn-link{display:inline-block;text-decoration:none !important;}
.aad-btn-link:focus{outline:2px solid rgba(0,0,0,0.25);outline-offset:2px;}


/* Button ripple */
.aad-btn{box-sizing:border-box;position:relative;overflow:hidden;}
}