@import "https://codepen.io/cbolson/pen/rNEdgKo.css" layer(base);
@import url(https://fonts.bunny.net/css?family=kodchasan:200,400,600)
layer(demo);

@layer base, demo;

@layer demo {
	.wrapper1 {
		width: min(100% - 2rem, 800px);}
	button{ display: block!important; text-align: center!important}
	
	
	.campaign-tags__filter-container{ margin-top: 0!important}
	.campaign-tags__filter-container, .campaign-tags__filter-toggle-container {
    display: flex;
    flex-wrap: wrap;
    column-gap: 0!important;
    row-gap: 1.5rem;
    align-items: baseline;
    justify-content: center;
}
	.tabs {
		--btn-bg: steelblue;
		--btn-bg-hover: hotpink;
		--btn-bg-active: var(--clr-cta);

		display: flex;
		gap: 0.5rem;
		margin-top: 1rem;
		padding-left: 0.5rem;  width: 80%; margin: 0 auto; flex-wrap: nowrap;justify-content: center; margin-top: 0!important; margin-bottom: 50px
	}

	.tabs{ flex-wrap: nowrap;justify-content: center; display: flex;	display: flex;
		justify-content: center;  text-align: center}
	
	
	
	.tabs > button {
		background-color: var(--btn-bg);
		border: none;
		outline: none;
		font-size: 1.1rem;
		padding: 0.5rem 0.5rem;
		border-radius: 5px 5px 5px 5px;
		 border: 1px #fff solid; background: none; color: #fff!important; display: block; width: 18%; margin-left:1%!important; margin-right: 1%!important; float: left; text-align: center
	
	}.tabs > button:hover{background-color: rgba(45, 45, 45, 0.5);}
	
	.tabs > button.active{ background: #fff; color: #000!important}
	.tabs-content {
		
		padding: 1rem;
		margin-top: -1px; color: #fff; width: 100%
	}
	.tabs-content > [role="tabpanel"] {
		display: none;
		transition: opacity 500ms ease-in-out;
		@starting-style {
			opacity: 0;
		}
	}
}