.grid {
	display: grid;
	gap: var(--grid-gap, 1rem);
	grid-template-columns: repeat(var(--grid-cols, 1), 1fr);
	align-items:flex-start;
}
.grid.grid--center{
	align-items:center;
}
.grid--clear-margin > * > * {
    margin-top: 0;
}
.grid > *{
    grid-column: span var(--grid-span, 1);
}
.grid picture,
.grid img {
    max-width: 100%;
}
.grid > .grid__row,
.grid > hr {
    grid-column: 1 / -1;
}

.grid.grid--images :is(figure,img, picture){
    /* aspect-ratio: 1; */
    overflow: hidden;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position:center;
    max-width:var(--grid-image-size,35vw);
}
.grid:has(>.card) {
    margin-bottom: 2rem;
}

.grid--clear-margin > div > * {
    margin-top: 0;
}


.grid .row-label {
		grid-column: 1 / -1;
    background: #205998;
    color: #fff;
    font-weight: bold;
    padding-inline: 1rem;
    justify-self: flex-start;
}

@media (max-width:1000px){
	.grid:not(.grid--mobile) {
		grid-template-columns: 1fr;
	}
	.grid:not(.grid--mobile) > *{
	    grid-column: span 1;
	}

}

/* flex grid */
.flex-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--grid-gap,1rem);
    justify-content: center;
    align-content: stretch;
}

.flex-grid > div {
    width: calc(100% / var(--grid-cols,auto) - var(--grid-gap,1rem));
    height: auto;
}

.grid-image img {
    aspect-ratio: 1;
    object-fit: cover;
    object-position: center;
    scale:1;
    transition:scale 300ms;
    z-index:-1;
    position:relative;
}

.grid-image--square :where(:hover, :focus-visible) img{
    scale:1.15;
    z-index:1;
}
.grid-image--square img{
    aspect-ratio: 1;
}
.grid-image--4x3 img{
    aspect-ratio:4/3;
}
.grid-image--16x9 img{
    aspect-ratio:16/9;
}


.flexbox {
    display: flex;
    gap: var(--grid-gap, 2rem);
    align-items: center;
}

.flexbox > * {
    flex: var(--flex , var(--grid-span , 1));
}
.flexbox.flexbox--reverse {
    flex-direction: row-reverse;
}
@media (max-width:1000px){
.flexbox.flexbox--reverse {
    flex-direction: row;
}
}




/* Table stuff */
table.styled {
	border: solid 1px #ccc;
	table-layout: auto;
	margin-block: 1rem;
}
table.styled td {
	padding: 1rem;
	border: solid 1px hsl(0deg 0% 20% / 20%);
}
table.styled td > *{
    padding-block:0;
    margin-block:0;
}
table.styled td > p ~ p{
	margin-top:1rem;
}
table.styled tr:nth-child(2n+1) td {
	background: #e4ebf2;
}
table.styled tr:nth-child(2n) {
	background: #fff;
}b
table.styled tr.head td {
	background: #205998;
	color: #fff;
	font-size: 1.8rem;
    font-weight:bold;
}
@media (max-width:1000px){
	table.styled,
	table.styled :is(td, tr, tbody) {
		display: block;
		border:none;
	}
	table.styled td[data-heading]{
		padding: .25rem .75rem;
		text-align: left !important;
		display: grid;
		gap: 1rem;
		grid-template-columns: 1fr 1fr;
	}
	table.styled .head{
		display:none;
	}
	table.styled td[data-heading]:before{
		content: attr(data-heading);
		font-weight: bold;
	}

	table.styled td:first-child{
		color: #205998;
		font-size: 2.4rem;
		font-weight: bold;
		grid-auto-flow: column;
		grid-template-columns: max-content;
	}
    table.styled tr:nth-child(2n+1) td{
        background: white;
    }
    table.styled tr td:nth-child(2n) {
        background: #e4ebf2;
    }
    table.styled tr {
        border: solid 1px #e4ebf2;
        margin-bottom: 1rem;
    }
}



/* Cards */
.card {
    background: #ebeff4;
    border: solid 1px #ccc;
    height: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
}

.card > div:nth-child(1) {
    overflow: hidden;
    margin-bottom: .5em;
}

.card img {
    display: block;
    aspect-ratio: 4/3;
    object-fit: cover;
    object-position: center;
    background: #fff;
}

.card > div:nth-child(2){
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 0 1rem 0;
	aspect-ratio:auto;
}

.card > div:nth-child(2) :last-child:has(.button) {
    margin-top: auto;
}
.card :last-child:has(.button){
    margin-block: auto 0;
}
.card :last-child:has(.button) .button{
	display:block;
	margin:0;
	padding: .25rem 1rem
}


/* Card 2 */
.card-2 {
	--_bs-blur: 10px;
	--_bs-position-y: 10px;
	--_bs-inset: 0px;
	display: grid;
	position: relative;
	box-shadow: 0px var(--_bs-position-y) var(--_bs-blur) var(--_bs-inset) rgb(0 0 0 / 0.2);
	scale: 1;
	transition: scale 300ms, box-shadow 300ms;
	background: #fff;
}

.card-2:hover {
	--_bs-blur: 20px;
	--_bs-position-y: 15px;
	--_bs-inset: -10px;
	scale: 1.025;
	z-index: 1;
}

.card-2__date {
	--_border: 1rem;
	margin: calc(-1 * var(--_border));
	position: absolute;
	z-index: 1;
	inset: calc(-1 * var(--_border)) auto auto calc(-1 * var(--_border));
	padding: calc(0.5 * var(--_border)) calc(2.5 * var(--_border));
	font-family: "Montserrat";
	font-size: 2rem;
	font-weight: 900;
	background: #205998;
	color: white;
	/* font-weight: bold; */
	backface-visibility: hidden;
	clip-path: polygon(20px 0%, 100% 0%, calc(100% - 20px) 100%, 0% 100%);
}

.card-2__figure {
	aspect-ratio: 4 / 3;
	overflow: clip;
	margin: 0;
}

.card-2__heading {
	text-align: center;
	font-family: "Montserrat";
	font-weight: 900;
	font-size: 3rem;
}

.card-2__content {
	padding: 0 1rem 1rem 1rem;
}





/* Elements */

.hatch-marks > * {
	padding: 0 calc(0.25rem * var(--_border));
	height: calc(0.2rem * var(--_border));
	margin-inline: calc(-0.05rem * var(--_border));
	background: #205998;
	font-size: 0px;
	font-weight: bold;
	backface-visibility: hidden;
	clip-path: polygon(calc(0.2rem * var(--_border)) 0%, 100% 0%, calc(100% - calc(0.2rem * var(--_border))) 100%, 0% 100%);
}

.hatch-marks {
	--_border: 10;
	display: grid;
	grid-auto-flow: column;
	gap: 0;
	justify-content: center;
	margin-block: 1rem;
}








/* callout block */
.callout {
    background: #ebeff4;
    padding: 3rem;
    margin: 2rem;
}

.callout > :first-child{
    margin-top: 0;
}
.callout > :last-child {
    margin-bottom: 0;
}
.callout > :last-child:has(.button) {
    margin-block: 0 -1rem;
}




/* Bleed block to edge of page */

.bleed-to-edge {
	position: relative;
	left: 50%;
	transform: translateX(-50vw);
	width: 100vw;
}





/* Parallax Code */

.parallax {
	position: relative;
	height:clamp(300px, 45vh, 850px);
	overflow: clip;
	display: grid;
	align-content: center;
}
.parallax__image {
	position: absolute;
	bottom: 0;
	display: block;
	width: 100%;
	min-width: 100%;
	min-height: 100%;
	object-fit: cover;
	object-position:center;
	transform: translateY(calc(var(--_scroll-percent) - calc(var(--_height) * var(--_scroll-value) / 100)) );
}
.parallax .container {
    position: relative;
    z-index: 1;
}