@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

/* -------------------------------------------------------------------------- */

/*	0. CSS Reset
/* -------------------------------------------------------------------------- */


html,
body {
	border: none;
	margin: 0;
	padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
address,
big,
cite,
code,
em,
font,
img,
small,
strike,
sub,
sup,
li,
ol,
ul,
fieldset,
form,
label,
legend,
button,
table,
caption,
tr,
th,
td {
	border: none;
	font-size: inherit;
	line-height: inherit;
	margin: 0;
	padding: 0;
	text-align: inherit;
}

blockquote::before,
blockquote::after {
	content: "";
}

*, *::before, *::after {
    box-sizing: border-box;
}

/* -------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------- */

@font-face {
    font-family: "Magistral";
    src: url(../fonts/magistral.ttf) format("truetype");
}

:root{

    --colour-bg: 250 247 247;
	--colour-menu: 254 252 252;
	--colour-light: 255 255 255;
	--colour-primary: 27 29 33;
	--colour-cwx: 236 31 39;
	--colour-medium: 231 217 217;
	--colour-link: 153 150 144;

	--font-regular-family: 'Lato', sans-serif;
	--font-heading-family: 'Magistral', sans-serif;
    --font-regular-weight: 300;
    --font-regular-size: 1rem;
    --font-small-size: .75rem;
	--font-x-small-size: .6rem;

	--default-border-radius: 10px;
	--default-input-border-radius: 4px;

}

html{
	font-family: var(--font-regular-family);
	font-weight: var(--font-regular-weight);
	font-size: var(--font-regular-size);
}

body{
	display: grid;
	grid-template-columns: auto 1fr;
	min-height: 100dvh;
	background-color: rgba(var(--colour-bg) / 1);
}



/* -------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------- */

main button{
	padding: .5rem 1rem;
	font-family: var(--font-regular-family);
	font-weight: var(--font-regular-weight);
	font-size: var(--font-regular-size);
	font-style: normal;
	color: rgba(var(--colour-light) / 1);
	background-color: rgba(var(--colour-cwx) / 1);
	border: none;
	border-radius: var(--default-input-border-radius);
	text-align: center;
	cursor: pointer;
	transition: background-color .2s ease-in-out;

	&:hover{
		background-color: rgba(var(--colour-primary) / 1);
	}
}

.formField{
	display: flex;
	flex-direction: column;
	margin-bottom: .5rem;
}

input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="datetime-local"], textarea{
	margin: .25rem 0;
	padding: .5rem;
	font-family: var(--font-regular-family);
	font-weight: var(--font-regular-weight);
	font-size: var(--font-regular-size);
	font-style: normal;
	color: rgba(var(--colour-primary) / 1);
	border-color: rgba(var(--colour-medium) / 1);
	border-radius: var(--default-input-border-radius);
	border-width: 1px;
	border-style: solid;
	background-color: rgba(var(--colour-light) / 1);

	&:focus{
		outline: 2px solid rgba(var(--colour-primary) / 1);
	}
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading-family);
	font-weight: var(--font-regular-weight);
	color: rgba(var(--colour-primary) / 1);
	margin-bottom: .5rem;
}

h1 {
	font-size: 2.5rem;
}

h2 {
	font-size: 2rem;
}

h3 {
	font-size: 1.5rem;
}

h4 {
	font-size: 1.25rem;
}

h5 {
	font-size: 1rem;
}

h6 {
	font-size: .9rem;
}

small {
	font-size: var(--font-small-size);
}

p {
	margin: 0 0 .75rem 0;
}

a {
	color: rgba(var(--colour-link) / 1);
	text-decoration: none;

	&:hover {
		text-decoration: underline;
	}
}

a.make-button{
	padding: .5rem 1rem;
	font-family: var(--font-regular-family);
	font-weight: var(--font-regular-weight);
	font-size: var(--font-regular-size);
	font-style: normal;
	color: rgba(var(--colour-light) / 1);
	background-color: rgba(var(--colour-cwx) / 1);
	border: none;
	border-radius: var(--default-input-border-radius);
	text-align: center;
	cursor: pointer;
	transition: background-color .2s ease-in-out;
	text-decoration: none;
	display: inline-block;

	&:hover{
		background-color: rgba(var(--colour-primary) / 1);
	}
}

.col-2{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
}



/* -------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------- */
.scroll-menu-container {
	display: grid;
	grid-template-columns: auto 1fr;
	margin: 1rem 0 1rem 0;
	height: 40px;
	max-width: 100%;
}

.scroll-menu {
	background-color: rgba(var(--colour-light) / 1);
	display: flex;
	border-radius: 20px;
	border: 1px solid rgba(var(--colour-medium) / 1);
	overflow: hidden;
	align-items: center;
	font-size: var(--font-small-size);
	text-transform: uppercase;
}

.scroll-menu-header {
	background-color: rgba(var(--colour-cwx) / 1);
	color: rgba(var(--colour-light) / 1);
	padding: 12px 25px 5px 25px;
	display: block;
	height: 100%;
}

.scroll-menu-list {
	margin: 0;
	display: flex;
	overflow: scroll;
	height: 100%;
	scrollbar-width: none;/* For Firefox */
	-ms-overflow-style: none;/* For IE and Edge */

	&::-webkit-scrollbar {
		display: none; /* For Chrome, Safari, and Opera */
	}

	& li{
		list-style: none;
		margin: 0;
		text-wrap: nowrap;

		& .scroll-menu-link {
			text-decoration: none;
			padding: 12px 25px 5px 25px;
			border-right: 1px solid rgba(var(--colour-medium) / 1);
			height: 100%;
			display: block;
			color: rgba(var(--colour-primary) / 1);
			background-color: rgba(var(--colour-cwx) / 0);
			transition: background-color .2s ease-in-out, color .2s ease-in-out;

			&:hover {
				background-color: rgba(var(--colour-cwx) / 1);
				color: rgba(var(--colour-light) / 1);
			}
		}

		& button.scroll-menu-link{
			border: unset;
			border-right: 1px solid rgba(var(--colour-medium) / 1);
			border-radius: unset;
			height: 100%;
			padding: 0 25px;
			background-color: unset;
			background-color: rgba(var(--colour-cwx) / 0);
			cursor: pointer;
			font-size: var(--font-small-size);
			text-transform: uppercase;
		}
	}

	& li:last-child .scroll-menu-link {
		border-right: none;
	}
}



/* -------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------- */


#main-nav{
	width:250px;
	height: 100dvh;
	background-color: rgba(var(--colour-menu) / 1);
	border-right: 1px solid rgb(var(--colour-medium));
	display: flex;
	flex-direction: column;
	position: sticky;
	top: 0;

	& header{
		padding: max(2vw, 1rem);
	}
}

#menu-toggle{
	display: none;
}



@media (max-width: 700px) {
	body{
		display: unset;
		grid-template-columns: unset;
		min-width: 100dvw;
	}

	#main-nav {
		position: fixed;
		z-index: 100;
		transform: translateX(-250px);
		transition: transform .2s ease-in-out;
	}
	#main-nav:has(#menu-toggle:checked) {
		transform: translateX(0);

		& .bar:nth-child(1){
			transform: rotate(45deg) translate(10px, 10px);
		}

		& .bar:nth-child(2){
			opacity: 0;
		}

		& .bar:nth-child(3){
			transform: rotate(-45deg) translate(9px, -10px);
		}
	}

	#menu-toggle-container{
		position: absolute;
		top: 0;
		left: 250px;
		width: 100dvw;
		height: 50px;
		background-color: rgba(var(--colour-menu) / 1);
		border-bottom: 1px solid rgb(var(--colour-medium));

	}



	#menu-btn{
		width: 35px;
		height: 30px;
		position: absolute;
		top: 10px;
		left: 10px;
		cursor: pointer;
		z-index: 100;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	#menu-btn .bar{
		width: 100%;
		height: 3px;
		background-color: rgba(var(--colour-primary) / 1);
		transition: all .2s ease-in-out;
	}

}

#main-nav .nav-content{
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	overflow: scroll;
}

button.dropdown-btn{
	display: flex;
	width: 100%;
	padding: max(.5vw, .5rem) max(1vw, .5rem);
	color: rgba(var(--colour-primary) / 1);
	border-radius: var(--default-input-border-radius);
	background-color: rgba(var(--colour-menu) / 1);
	transition: background-color .2s ease-in-out;
	align-items: center;
	gap: 1rem;
	font-family: var(--font-regular-family);
	font-weight: var(--font-regular-weight);
	font-size: var(--font-regular-size);

	&:hover{
		background-color: rgba(var(--colour-medium) / 1);
		svg path{
			fill: rgba(var(--colour-primary) / 1);
		}
	}

	& svg path{
		fill: rgba(var(--colour-medium) / 1);
	}

}

button.dropdown-btn .menu-txt{
	flex-grow: 1;
}

button.dropdown-btn .menu-item-toggle{
	transform: rotate(0deg);
	transition: transform .2s ease-in-out;
}

button.dropdown-btn.open .menu-item-toggle{
	transform: rotate(180deg);
}

.sub-menu{
	display: grid;
	grid-template-rows: 0fr;
	transition: 300ms ease-in-out;
}


.sub-menu.show{
	grid-template-rows: 1fr;
}


.sub-menu ul{
	overflow: hidden;
	list-style: none;
	margin: 0 .5rem;
}

.nav-main, .nav-utils{

	padding: max(1vw, .5rem);
	list-style: none;

	& a{
		display: flex;
		align-items: center;
		gap: 1rem;
		text-decoration: none;
		padding: max(.5vw, .5rem) max(1vw, .5rem);
		color: rgba(var(--colour-primary) / 1);
		border-radius: var(--default-input-border-radius);
		background-color: rgba(var(--colour-menu) / 1);
		transition: background-color .2s ease-in-out;

		& .menu-icon svg path{
			fill: rgba(var(--colour-medium) / 1);
		}

		&:hover{
			background-color: rgba(var(--colour-medium) / 1);

			.menu-icon svg path{
				fill: rgba(var(--colour-primary) / 1);
			}
		}
	}
}

.nav-main{
	flex: 1;
}

.nav-utils{
	border-top: 1px solid rgb(var(--colour-medium));
}

/* -------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------- */

main{
	padding: max(2vw, 1rem);
}

@media (max-width: 700px) {
	main{
		margin-top: 60px;
		padding: max(2vw, .5rem);
		min-width: 100%;
		min-height: 100%;
		overflow-y: scroll;
	}
}

.breadcrumbs{
	font-size: var(--font-small-size);
	margin-bottom: 1rem;

	& li {
		list-style: none;
		display: inline-block;
		margin-right: .25rem;
	}

	& li::before {
		content: '\00BB';
		margin-right: .25rem;
	}
}

.container{
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	padding: max(2vw, 1rem);
	border-radius: var(--default-border-radius);
	background-color: rgba(var(--colour-menu) / 1);
	border: 1px solid rgba(var(--colour-medium) / 1);
}

/* -------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------- */

.loading {
	position: relative;
	width: 100%;
	height: 10px;
	background: rgba(var(--colour-medium) / 1);
	overflow: hidden;
	border-radius: 5px;
}

.loading::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	background: rgba(var(--colour-cwx) / 1);
	border-radius: 5px;
	width: 50%;
	animation: loading-swing 1s infinite alternate ease-in-out;
}

@keyframes loading-swing {
	0% {
		transform: translateX(-90%);
	}
	100% {
		transform: translateX(190%);
	}
}

/* -------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------- */

.list-icon-link{
	list-style: none;
	margin: 0;
	padding: 0;

	& li>a{
		display: flex;
		align-items: center;
		gap: 1rem;
		text-decoration: none;
		color: rgba(var(--colour-primary) / 1);
		border-radius: var(--default-input-border-radius);
		background-color: rgba(var(--colour-cwx) / 0);
		transition: background-color .2s ease-in-out, color .2s ease-in-out;
		padding: max(.5vw, .5rem) max(1vw, .5rem);
		border-bottom: 1px solid rgba(var(--colour-medium) / 1);

		svg path{
			fill: rgba(var(--colour-primary) / 1);
			transition: fill .2s ease-in-out;
		}

		&:hover{
			background-color: rgba(var(--colour-cwx) / 1);
			color: rgba(var(--colour-light) / 1);

			svg path{
				fill: rgba(var(--colour-light) / 1);
			}
		}
	}

	& li:nth-child(1)>a{
		border-top: 1px solid rgba(var(--colour-medium) / 1);
	}
}

.calendar-hdr-utils{
	display: flex;
	justify-content: space-between;
	margin: 2rem 0;
}

.calendar-add-flyout{
	position: fixed;
	top: 0;
	right: 0;
	width:50dvw;
	bottom:0;
	background-color: rgba(var(--colour-menu) / 1);
	z-index: 100;
	transform: translateX(100%);
	transition: transform .3s ease-in-out, width .3s ease-in-out;
	display: flex;
	justify-content: center;
	align-items: center;
	border-left: 1px solid rgba(var(--colour-medium) / 1);
	box-shadow: 0px 1px 12px -4px rgba(0,0,0,0.25);

	&.open{
		transform: translateX(0%);
	}

	@media (max-width: 700px) {
		& {
			width: 100dvw;
		}
	}
}

.calendar-add-flyout_container{
	padding: max(2vw, 1rem);
	max-height: 100%;
	min-width: 75%;
	overflow-y: scroll;
}

/* -------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------- */

.calendarUtilities{
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 1rem;
	align-items: center;
}

.calendarList{
	list-style: none;
	margin: 0;
	padding: 0;
}

.calendarItemDay{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: max(.5vw, .5rem) max(1vw, .5rem);
	border-radius: var(--default-input-border-radius);
	background-color: rgba(var(--colour-cwx) / 0);
	transition: background-color .2s ease-in-out, color .2s ease-in-out;
	cursor: pointer;
	color: rgba(var(--colour-primary) / 1);

	&:hover{
		background-color: rgba(var(--colour-cwx) / 1);
		color: rgba(var(--colour-light) / 1);
	}

	&.open{
		background-color: rgba(var(--colour-cwx) / 1);
		color: rgba(var(--colour-light) / 1);
	}
}

.calendarItemDay_date-toggle{
	transform: rotate(0deg);
	transition: transform .2s ease-in-out;
}

.calendarItemDay.open .calendarItemDay_date-toggle{
	transform: rotate(180deg);
}

.calendarItemDay.open + .calendarItemDay_items-container{
	grid-template-rows: 1fr;
}

.calendarItemDay_items-list{
	list-style: none;
	margin: 0;
	overflow: hidden;
	margin: max(1vw, .5rem);
}

.calendarItemDay_items-container{
	display: grid;
	grid-template-rows: 0fr;
	transition: 300ms ease-in-out;


}

.calendarItemDay_items-list_item{
	display: grid;
	grid-template-columns: 10px 1fr;
	gap: 1rem;;
	border-bottom: 1px solid rgba(var(--colour-medium) / 1);

	&.not-public{
		background-color: rgba(var(--colour-cwx) / .1);
	}
}

.publishedIndicator{
	width: 10px;
	background-color: rgba(var(--colour-cwx) / 1);

	&.published{
		background-color: greenyellow;
	}
}

.calendarItemDetails{
	display: grid;
	grid-template-columns: 1fr 60px 1fr 1fr 1fr;
	gap: 1rem;
	padding: max(.5vw, .5rem) 0;
}

.calendarItem_title{
	font-weight: bold;
}

.calendarItems_actions{
	display: flex;
	gap: 1rem;
	justify-content: flex-end;
	padding: 0 max(.5vw, .5rem) 0 0;
}

.calendarItem_meta_sub{
	font-style: italic;
}

.calendarItem_meta_desc{
	font-size: var(--font-small-size);
}

.assoc_event-selector{
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 1rem;

	& button{
		justify-self: start;
		align-self: center;
	}
}



/* -------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------- */

.athlete-cards-container{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: max(2vw, 1rem);
	margin: 2rem 0;
}

a.athlete-card{
	background-color: rgba(var(--colour-menu) / 1);
	border-radius: var(--default-border-radius);
	overflow: hidden;
	border: 1px solid rgba(var(--colour-medium) / 1);
	height: 450px;
	display: grid;
	grid-template-rows: auto 1fr;
	transition: background-color .2s ease-in-out, color .2s ease-in-out;
	text-align: center;

	&:hover {
		background-color: rgba(var(--colour-cwx) / 1);
		color: rgba(var(--colour-light) / 1);
		text-decoration: none;

		& img{
			transform: scale(1.05);
		}
	}
}

.athlete-card-image{
	max-width: 100%;
	height: 375px;
	overflow: hidden;
	object-fit: cover;

	& img{
		width: 100%;
		height: 100%;
		object-fit: cover;
		transform: scale(1);
		transition: transform .2s ease-in-out;
	}
}

.athlete-card-details{
	max-width: 100%;
	overflow: hidden;
}
.athlete-card-bio{
	padding: max(.5vw, .5rem) max(1vw, .5rem);
}

.athlete-card-name{
	margin-bottom: .1rem;
	padding-bottom: .25rem;
	border-bottom: 1px solid rgba(var(--colour-medium) / 1);
	text-transform: uppercase;
}

.athlete-card-bio-dob-nation{
	display: flex;
	gap: 1rem;
	justify-content: center;
	align-items: center;
}

.athlete-card-dob{
	font-size: var(--font-small-size);
}

.athlete-card-nation{
	width: 20px;

	& img {
		width: 100%;
	}
}

.athlete-card-sponsors{
	font-size: var(--font-x-small-size);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%; /* Approximates a 40-character limit */
	text-align: center;
	margin: 0 auto;
}

/* -------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------- */


.festival-cards-container{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
	gap: max(2vw, 1rem);
	margin: 2rem 0;
}

.festival-card{
	display: grid;
	grid-template-rows: auto 1fr;
	border-radius: var(--default-border-radius);
	overflow: hidden;
	background-color: rgba(var(--colour-menu) / 1);
	border: 1px solid rgba(var(--colour-medium) / 1);
	transition: background-color .2s ease-in-out;
	color: rgba(var(--colour-link) / 1);

	&:hover {


		& img.festival-card-img{
			transform: scale(1.05);
		}
	}
}

.festival-card-graphic{
	width: 100%;
	height: 400px;
	overflow: hidden;
	position: relative;

	& .festival-card-img{
		width: 100%;
		height: 100%;
		object-fit: cover;
		transform: scale(1);
		transition: transform .2s ease-in-out;
	}
}

.festival-card-logo{
	position: absolute;
	left: 50%;
	top: 80%;
	transform: translate(-50%, -50%) scale(75%);

	-webkit-filter: drop-shadow( 3px 3px 6px rgba(0, 0, 0, .7));
  	filter: drop-shadow( 3px 3px 6px rgba(0, 0, 0, .7));
}

.festival-card-details{
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	height:75px
}

.festival-card-details-info{
	padding: max(.5vw, .5rem) max(1vw, .5rem);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.festival-card-date{
	font-size: var(--font-small-size);
}

.festival-card-actions{
	display: flex;
	justify-content: center;
	align-items: center;
	border-left: 1px solid rgba(var(--colour-medium) / 1);

}

/* -------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------- */

.event-card-container{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
	gap: max(2vw, 1rem);
	margin: 2rem 0;
	align-items: start;
}

.event-card{
	width: 100%;
	overflow: hidden;
	border-radius: var(--default-border-radius);
	background-color: rgba(var(--colour-menu) / 1);
	border: 1px solid rgba(var(--colour-medium) / 1);
	color: rgba(var(--colour-link) / 1);
}

.event-card-header{
	position: relative;
	aspect-ratio: 2 / 1;
	overflow: hidden;

	& img{
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	& h2{
		position: absolute;
		bottom: 1rem;
		left: 1rem;
		margin: 0;
		color: rgba(var(--colour-light) / 1);
		text-align: left;
		text-shadow: 3px 3px 6px rgba(0, 0, 0, .7);
	}
}

.event-card-body-event-description{
	padding: max(.5vw, .5rem) max(1vw, .5rem);
}

.event-card-utilties{
	padding: max(.5vw, .5rem) max(1vw, .5rem);

	& button{
		width: 100%;
	}
}

/* -------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------- */

#event-category-pop open{

	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 100;
	display: flex;
	justify-content: center;
	align-items: center;

	&::before{
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(var(--colour-primary) / .9);
		z-index: -1;
	}
}

.event-category-container{
	display: flex;
	flex-direction: column;
	gap: 1rem;
	background-color: rgba(var(--colour-bg) / 1);
	/* border-radius: var(--default-border-radius); */
	padding: max(1vw, 1.5rem) max(1vw, .5rem);
	/* border: 1px solid rgba(var(--colour-medium) / 1); */
	max-width: 700px;
	max-height: 100%;
	overflow-y: scroll;
}

.event-category-container-body{
	display: flex;
	flex-direction: column;
	gap: 1rem
}

.event-category-card{
	width: 100%;
	overflow: hidden;
	border-radius: var(--default-border-radius);
	background-color: rgba(var(--colour-menu) / 1);
	border: 1px solid rgba(var(--colour-medium) / 1);
	color: rgba(var(--colour-link) / 1);
}


.event-category-card-body{
	padding: max(1vw, 1rem) max(1vw, .5rem);
	border-bottom: 1px solid rgba(var(--colour-medium) / 1);
}

.event-category-card-date{
	font-size: var(--font-small-size);
}

.event-category-card-footer{
	
	display: grid;
	grid-template-columns: 2fr 1fr;
	align-items: center;
}

.event-category-card-price{
	padding: max(1vw, 1rem) max(1vw, .5rem);
	font-size: 1.25rem;
}
.event-category-card-category-action{
	padding: max(1vw, 1rem) max(1vw, .5rem);
	border-left: 1px solid rgba(var(--colour-medium) / 1);
	display: flex;
	justify-content: center;
	align-items: center;
}