/* ---------------------------------------------------
	Imports 

	Note! to minify and autoprefix the css use the 
	/css-prod/index.scss with the proper compile settings  

	Remember to keep imports aligned 
	@import url(_reset.css);  =>   @use '../css/reset';

	Remember to switch path in index.html in prod
	./css-prod/index.css

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


/* base */
@import url(_reset.css);
@import url(_config.css);
@import url(_typography.css);
@import url(_layout.css);
@import url(_theme.css);
@import url(_anim.css);


/* components */
@import url(_page.css);
@import url(_wallpaper.css);
@import url(_embed.css);
@import url(_teleprompter.css);
@import url(_facts-vertical.css);
@import url(_renae-story.css);


/* sections */
@import url(_section-01.css);
@import url(_section-02.css);
@import url(_section-03.css);
@import url(_section-04.css);
@import url(_section-05.css);
@import url(_section-06.css);
@import url(_section-07.css);


.placeholder {
	margin: 3rem;
	background: var(--theme-color-back);
	width: 30vw;
	height: 100%;
	border-radius: var(--border-radius);
	display: grid;
	place-content: center;
}

.todo {
	background: magenta;
	padding: .5rem;
	color:white;
}



[data-comp="video"], [data-comp^="video "] {
	aspect-ratio: 16 / 9;
	> * {
		width: 100%;
		height: 100%;
		border: 0;
	}
}