.comp-filters {
    gap: var(--cv-g-xs);
}

.events-main-section .comp-filters {
    background-color:var(--clr-l-3)!important;
}

.comp-icon {
    --mask-url: none;
    --mask-bg-clr: var(--clr-pur-1);
    width: 20px;
    height: 20px;
    background-color: var(--clr-t-2);
    -webkit-mask: var(--mask-url) center/contain no-repeat;
    mask: var(--mask-url) center/contain no-repeat;
    transition: background-color var(--cv-transition);
}

.filter-btn:is(:hover,.active) {
    color: var(--clr-t-0);
}

.filter-btn:is(:hover,.active) .comp-icon {
    background-color: var(--mask-bg-clr);
}

.competitions-grid {
    height: 350px;
}

.no-events-in-grid {
    margin: auto;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    color: var(--clr-t-3);
}

.comp-card {
    --card-min-width: 278px;
    --card-max-width: 300px;
    --card-height: 310px;
    --card-bg-size: 115%;
    --card-bg-size-hover: 125%;
    --card-padding: 20px;
    --card-radius: var(--cv-g-m);
    --comp-title-size: clamp(12px, 3vw, 16px);
    --comp-title-line-height: clamp(14px, 3vw, 16px);
    min-width: var(--card-min-width);
    max-width: var(--card-max-width);
    height: var(--card-height);
    background: var(--bg-image) center/var(--card-bg-size) auto no-repeat;
    border: 2px solid var(--clr-l-0);
    border-radius: var(--card-radius);
    scroll-snap-align: start;
    overflow: hidden;
    box-shadow: inset 0 0 20px 2px rgba(0,0,0,.15);
    transition: var(--cv-transition);
}

.comp-card:hover {
    background-size: var(--card-bg-size-hover) auto;
}

.comp-card_inner {
    height: 100%;
    border-radius: inherit;
    overflow: hidden;
}

.comp-info {
    margin-top: auto;
    max-height: 52%;
    padding: var(--card-padding);
    background: linear-gradient(0deg,rgba(10,10,10,.9)0,rgba(10,10,10,.2) 100%);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

.comp-title {
    font-size: var(--comp-title-size);
    font-weight: 700;
    line-height: var(--comp-title-line-height);
    color: var(--clr-l-0)!important;
}

.comp-sub-heading {
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--clr-l-4);
}

.comp-start {
    font-size: 12px;
    line-height: 14px;
}

.comp-rules {
    margin: 6px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--clr-l-0);
}

.comp-data-value {
    font-weight: 700;
    color: var(--clr-l-0);
}

@media (max-width:860px) {
    .comp-brand {
        display: none;
    }
}