/* @group Events cards view
------------------------------------ */

.events-container .cardView .outer-box { display: flex; flex-wrap: wrap; }
.events-container .cardView .event { background-color: var(--navy-blue); color: var(--white); flex: 0 1 100%; max-width: 100%; margin: 0 0 2.5em; padding: 0 3.5em 5em; position: relative; }
.events-container .cardView .event .img-box { background-color: unset; }
.events-container .cardView .event .img-box:not(.background)::before { content: ''; position: absolute; top: 4.8rem; left: 0; bottom: 0; right: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 64.58%, rgba(0, 0, 0, 0.45) 100%); }
.events-container .cardView .event .img-box.background { height: 20em; position: absolute; top: 0; left: 0; width: 100%; }
.events-container .cardView .event .category { width: 100%; position: absolute; top: 3em; left: 50%; transform: translate(-50%, 0); display: flex; align-items: center; row-gap: .5em; column-gap: 1.5em; flex-wrap: wrap; padding: 0 2em; }
.events-container .cardView .event .category span { font-size: 1.2em; line-height: 1.5em; letter-spacing: .07em; font-weight: 700; text-transform: uppercase; display: inline-block; width: fit-content; padding: .5rem 2rem; background-color: var(--yellow); color: var(--navy-blue); border-radius: 10em; }
.events-container .cardView .event .category span.daily { background-color: var(--secondary-lightblue); }
.events-container .cardView .event .category span.weekly { background-color: var(--secondary-pink); }
.events-container .cardView .event .category span.monthly { background-color: var(--secondary-orange); }
.events-container .cardView .event .category span.single { background-color: var(--secondary-orange); }
.events-container .cardView .event .txt-box { padding-top: 3em; }
.events-container .cardView .event h3 { text-transform: uppercase; font-size: 3em; line-height: 1em; letter-spacing: .0667em; margin: 0 0 .6em; }
.events-container .cardView .event p { font-size: 1.5em; line-height: 1.8em; }
.events-container .cardView .event p:not(:last-of-type) { margin: 0 0 .25em; }

.events-container .cardView .event .bttn-outlined { margin: 1.25em 0 0; background-color: var(--navy-blue); color: var(--white); }
.events-container .cardView .event .bttn-outlined i { --bg-color: var(--navy-blue); }


@media only screen
and (min-width : 961px) {
    
    .events-container .cardView .outer-box { column-gap: 6.4rem; row-gap: 5rem; }
    .events-container .cardView .event { flex: 0 1 calc(33% - 3.9rem); max-width: calc(33% - 3.9rem); margin: 0; padding: 3rem; }
    .events-container .cardView .event .category { top: 3rem; row-gap: .5rem; column-gap: 2rem; align-items: flex-start; padding: 0 3rem; }
    .events-container .cardView .event .category span { border-radius: 10rem; }
    .events-container .cardView .event .category .single { min-width: 17rem; }
    .events-container .cardView .event .img-box:not(.background) { 
        height: 43rem; 
        aspect-ratio: 1 / 1;
        width: 100%;
        height: auto; }
    .events-container .cardView .event .img-box.background { height: 31.5rem; }
    .events-container .cardView .event .txt-box { padding-top: 3rem; }
    .events-container .cardView .event h3 { margin: 0 0 3rem }
    .events-container .cardView .event p:not(:last-of-type) { margin: 0 0 .25rem; }
    .events-container .cardView .event .bttn-outlined { margin: 3rem 0 0; }
    
}
@media only screen
and (min-width : 961px)
and (max-width : 1440px) {
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
    .events-container .cardView .event .img-box:not(.background) { aspect-ratio: 1 / 1; }
}


/* @end */