@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: 100rem;
	margin-inline: auto;
	padding-inline: 24px;
}

.left-just {
	text-align: left;
}

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

.product-grid {
	display: grid;
	gap: 50px;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
	
.card {
	aspect-ratio: 1 / 1.25;
}

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: 2rem;
	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__content {
	background: white;
	align-self: end;
	/*margin: 8px 8px 24px;*/
	padding: 10px;
	box-shadow: 0 4.5px 16px rgb(0 0 0 / 0.1);
}
.card__title {
font-size: 1.25rem;
line-height: 1.1;
}
.card__description {
	font-family: "Times New Roman";
	font-size: 1.15rem;
}

/* IMG */
.image {
	border: 3px solid #365682;
	margin: 8px;
	width: 65px;
}
.imgbut:hover {
	filter: brightness(150%);
}
.spotimg {
	text-align: center;
}
.img1 {
	width: 75px;
}
.img2 {
	width: 70px;
}
.card__img {
	width: 100%;
	aspect-ratio: 1 / 1.25;
	object-fit: cover;
}

@media (min-width: 900px) {
	.card__img {
	  aspect-ratio: 1 / 1;
	}
 
	.card.featured {
	  grid-row: span 2;
	  grid-column: span 2;
	}
 
	.card.featured .card__img {
	  aspect-ratio: 1 / 1.25;
	}
 
	.card.featured .card__title {
	  font-size: 1.75rem;
	}
}
 
p.max-content {
	width: max-content;
}
 
p.min-content {
	width: min-content;
}

.hide {
	display: none;
}