/* hero section */
#hero {
	gap: 8em;
	align-items: center;
	justify-content: center;
}
#hero .centered { text-align: center; }
#hero .left {
	gap: var(--spacing-xl);
}
#hero .left .text-block .desc { width: 50ch; opacity: 0.9; }

#hero .right .fake-card {
	min-height: 14em;
    min-width: 14em;
    background: var(--background);
    border-radius: var(--b-radius);
}

#hero .right .event-card {
	background: var(--background);
	padding-bottom: var(--spacing-l);
	gap: var(--spacing-xl);
	padding: var(--spacing-m);
	width: fit-content;
}
#hero .right .card .title-bar .icon-frame img { width: 100%; }
#hero .right .event-card .title-bar .subtitle { max-width: 10ch; }
#hero .right .event-card .fields { margin-bottom: var(--spacing-s); }
#hero .right .event-card .fields .field { gap: var(--spacing-s); }
#hero .right .event-card .fields .field input {
	padding: var(--spacing-s);
	border: none;
	border-bottom: solid 1px var(--primary);
	color: var(--primary);
	font-weight: bold;
}
#hero .right .event-card .fields .field input#input-where {
	border: none;
	flex: 1;
}
#hero .right .event-card .fields .input-wrapper {
	display: flex;
	flex-direction: row;
	border-bottom: solid 1px var(--primary);
}
#hero .right .event-card .fields .field .copy-btn {
	border: none;
    background: var(--disabled);
    color: var(--primary);
    cursor: pointer;
	display: flex;
}
#hero .right .event-card .fields .field .copy-btn img {
	max-width: 2em;
	max-height: 2em;
}
#hero .right .event-card .fields .field .copy-btn:hover {
	background-color: var(--gray);
}
#hero .right .event-card .fields .field .copy-btn.copied {
	background-color: var(--primary--dimmed);
	transition: all 2s linear;
	cursor: progress;
}

@media screen and (max-width: 1280px) {
}

@media screen and (max-width: 769px) {
	#hero .left { gap: var(--spacing-m); }
	#hero .right { align-items: center; display: none; }
}

@media screen and (max-width: 581px) {
	#hero .left .text-block .desc { width: 45ch; }
}