@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');

.acol{background:#0a0a0a;color:#fff;padding:clamp(40px,7vw,80px) clamp(16px,4vw,56px) 90px;font-family:system-ui,-apple-system,sans-serif;box-sizing:border-box}
.acol *,.acol *::before,.acol *::after{box-sizing:border-box}
.acol__kicker{font-family:'Anton',sans-serif;text-transform:uppercase;letter-spacing:.2em;color:#67c05f;margin:0 0 10px;font-size:clamp(.8rem,1.4vw,1rem)}
.acol__title{font-family:'Anton',sans-serif;font-size:clamp(2.6rem,9vw,6.5rem);text-transform:uppercase;letter-spacing:-.02em;margin:0;line-height:.88}
.acol__sub{color:#fff;font-family:'Anton',sans-serif;text-transform:uppercase;letter-spacing:.03em;margin:.5rem 0 2.6rem;opacity:.7;font-size:clamp(1rem,2.4vw,1.5rem)}

.acol__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1px;background:#222;border:1px solid #222}
.acol__card{display:flex;flex-direction:column;background:#0f0f0f;text-decoration:none;color:#fff;transition:background .15s}
.acol__card:hover,.acol__card:focus-visible{background:#151515}

.acol__media{position:relative;aspect-ratio:1/1;overflow:hidden;background:#000}
.acol__vid,.acol__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(.35) contrast(1.05);transition:filter .25s,transform .35s}
.acol__card:hover .acol__vid,.acol__card:hover .acol__img,.acol__card:focus-visible .acol__vid,.acol__card:focus-visible .acol__img{filter:none;transform:scale(1.04)}
.acol__ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'Anton',sans-serif;font-size:2rem;color:#333}
.acol__date{position:absolute;top:0;left:0;background:#67c05f;color:#000;font-family:'Anton',sans-serif;font-size:.82rem;padding:.4rem .65rem;letter-spacing:.03em;z-index:2}

.acol__info{padding:1.05rem 1.1rem 1.2rem;display:flex;flex-direction:column;gap:.3rem;flex:1}
.acol__city{font-family:'Anton',sans-serif;font-size:1.55rem;text-transform:uppercase;margin:0;letter-spacing:.01em;line-height:1}
.acol__venue{font-size:.82rem;color:#9a9a9a;margin:0;flex:1;padding-top:.2rem}
.acol__foot{display:flex;justify-content:space-between;align-items:center;margin-top:.8rem;padding-top:.8rem;border-top:1px solid #262626}
.acol__price{font-family:'Anton',sans-serif;color:#67c05f;font-size:1.05rem;letter-spacing:.01em}
.acol__btn{background:#fff;color:#000;font-family:'Anton',sans-serif;font-size:.78rem;text-transform:uppercase;padding:.5rem .85rem;letter-spacing:.04em;transition:background .15s}
.acol__card:hover .acol__btn,.acol__card:focus-visible .acol__btn{background:#67c05f}

@media(max-width:520px){.acol__grid{grid-template-columns:1fr}}