.flexbox2, .flexbox3, .flexbox4, .flexbox5, .flexbox6,
.cardlist2, .cardlist3, .cardlist4{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items:flex-start;
	gap:var(--gap);
	.full{width:100%;}
	&>h1,&>h2,&>h3,&>h4,&>h5,&>h6, .item-width-100{width:100%;}
}
.flexbox2, .cardlist2{
	&>div{
		width:100%; 
		@media screen and (min-width: 40rem) {
			width: calc(50% - 1.1rem);
			&.item-width-25{width: calc(25% - 1.1rem); }
			&.item-width-75{width: calc(75% - 1.1rem);}
			&.item-width-33{width: calc(33% - 1.1rem);}
			&.item-width-66{width: calc(67% - 1.1rem);}
		}
	}
	&.hero>div{
		width:100%;
		@media screen and (min-width: 60rem) {
			width: calc(50% - 1.1rem);
		}
	}
}
.flexbox3, .cardlist3 {
	&>div{
		width:100%; 
		@media screen and (min-width: 64rem) {
			width: calc(33% - 20px);
			&.item-width-25{width: calc(25% - 25px); }
			&.item-width-33{width: calc(33% - 25px); }
			&.item-width-50{width: calc(50% - 50px);}
		}
		@media print{
			width: calc(33% - 20px);
		}
	}
}
.flexbox4, .cardlist4{ 
	&>div{
		width:100%; 
		@media screen and (min-width:40rem) {
			width: calc(50% - 1.125rem);
		}
		@media screen and (min-width: 64rem) {
			width: calc(25% - 1.625rem);
		}
	}
}
.flexbox5{
	&>div{
		width:100%; 
		@media screen and (min-width: 64rem) {
			width: calc(20% - 25px);
		}
	}
}
.flexbox6{ 
	&>div{
		width:100%; 
		@media screen and (min-width:40rem) {
			width: calc(32% - 15px);
		}
		@media screen and (min-width: 64rem) {
			width: calc(16% - 25px);
		}
	}
}
.cardlist2, .cardlist3, .cardlist4{align-items:stretch;}