@charset "utf-8";
/* PRODUCTS */
 
/* A elements that don't have a class get default styles */
/*a:not([class]) {
	text-decoration-skip-ink: auto;
}*/ 

.container {
	max-width: 100vw;
	margin-inline: auto;
	padding-inline: 10px;
}

.stacked {
	display: grid;
}
.stacked > * {
	grid-column: 1 / 3;
	grid-row: 1 / 2;
}

.product-grid {
	display: grid;
	gap: 50px;
	grid-template-columns: repeat(auto-fit, minmax(325px, 1fr));
}

p, p .dropcap {
	text-indent: 15px;
}

spot-title {
	font-family: 'Arial', 'Helvetica', system-ui, sans-serif;
	background: var(--orange);
	color: white;
	padding: 10px 5px 0 5px;
	font-size: 3rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-align: right;
	line-height: 1;
	z-index: 5;
	height: min-content;
}
feat-title {
	font-family: var(--ff-secondary);
	padding: 10px 5px 0 5px;
	font-family: "Arial";
	font-size: 3rem;
	text-align: center;
	padding: 5px;
	letter-spacing: 1.75px;
}
prod-title {
	font-family: var(--ff-secondary);
	font-size: 2rem;
	text-align: center;
	padding: 5px;
	letter-spacing: 1.75px;
}

.card {
	aspect-ratio: 1 / 1;
	box-shadow: 1px 4.5px 16px rgb(0 0 0 / 0.1);
	margin-bottom: 50px;
}

.card__front {
	border: 2px solid var(--coin);
}

.card__back {
	border: 2px solid var(--coin);
	background: var(--fgc);
	color: var(--bgc);
	height: fit-content;
}

.card__content {
	background: white;
	display: grid;
	align-self:first baseline;
	/*margin: 8px 8px 24px;*/
	margin: -10px 0 0 0;
	padding: 20px 0;
}
.card__title {
	font-size: 1.25rem;
	line-height: 1.1;
}
.card__description {
	font-family: "Times New Roman";
	font-size: 2.5vw;
	margin: 10px 18px 5px 15px;
	padding: 0 15px;
	border: 1px dashed var(--grayed-bg);
	line-height: 1rem;
}

.card__img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}
.image-sm {
	width: 25%;
}

.mission__text {
	text-align: center;
	margin: 10px;
	padding: 10px;
}
.mission {
	background: white;
	padding: 10px;
	margin: 10px;
	box-shadow: 1 4.5px 16px rgb(0 0 0 / 0.1);
	/*border: 1px dashed #000;*/
}

/*@media (min-width: 500px) and (max-width: 699px) {
}*/

@media screen and (min-width: 700px) {
	.card__img, .card {
		aspect-ratio: 1 / 1;
	}
	 .container {
		 max-width: 100rem;
		 padding-inline: 24px;
	 }
	 .stacked > * {
		 height: 100%;
	 }
	 .mission__text {
		margin: 0 20px 5px 20px;
		padding: 0 0 5px 0;
	}
	.mission {
		padding: 20px 50px 0 10px;
		margin: 0 60px 20px 60px;
	}
	.card {
		margin-bottom: 50px;
	}
}

@media screen and (min-width: 700px) and (max-width: 999px) {
	.card__description {
		font-size: 2vw;
	}
}

@media screen and (min-width: 1000px) {
	.card__description {
		font-size: .6vw;
		line-height: 1rem;
	}
}

p.max-content {
	width: max-content;
}
p.min-content {
	width: min-content;
}