BajaUofCWebsite/src/OurSponsors/OurSponsors.css

:root {
	--tableBackground: white;
	--sponsorBorderWidth: 2px;
	--sponsorBorderStyle: solid;
	--sponsorBorderColour: black;
	--sponsorBorder: var(--sponsorBorderWidth) var(--sponsorBorderStyle)
		var(--sponsorBorderColour);
}

#OurSponsors {
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* background-color: gray; */
}

#SponsorsAbout {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 4svh 0svw;
	background-color: var(--BajaBlack);
	color: white;
}

#SponsorsAbout h2 {
	margin: 0px;
	padding: 2svh 0svw;
	padding-top: 4svh;
	font-size: 30px;
}

#SponsorsAbout p {
	font-size: larger;
	padding: 0px;
	margin: 0px;
	max-width: 120ch;
	text-align: center;
}

#SponsorsAbout ul {
	list-style-type: none;
	display: flex;
	flex-flow: row wrap;
	column-gap: 4svw;
	padding: 0svh 0svw;
	padding-top: 4svh;
}

#SponsorsAbout a {
	text-decoration: none;
	color: white;
	background-color: var(--BajaRed);
	border-radius: 15px;
	padding: 2svh 2svw;
}

#SponsorsAbout a:hover {
	background-color: rgba(128, 128, 128, 0.4);
	color: var(--BajaBlack);
}

#Sponsor .Sponsors h3 {
	font-size: xx-large;
	margin: 2svh 1svw;
}

#Sponsor {
	padding-bottom: 3svh;
}

#SponsorEnd {
	text-align: end;
}

#OurSponsors h1 {
	position: relative;
	text-align: left;
	border-bottom: var(--sponsorBorder);
	border-top: var(--sponsorBorder);
	width: fit-content;
	padding-top: 2svh;
	padding-bottom: 2svh;
}

#OurSponsors #h1Exception {
	border-top: none;
}

#Sponsor .Sponsors h1 {
	width: 100%;
	border: none;
}

.Sponsors {
	display: flex;
	flex-direction: column;
	background-color: inherit;
	align-items: center;
	width: 70svw;
}

.Sponsors a {
	display: flex;
	flex-direction: column;
	color: inherit;
	text-decoration: none;
	cursor: pointer;
	background-color: whitesmoke;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	transition: scale 0.3s;
	width: inherit;
}

.Sponsors a:hover {
	cursor: pointer;
	scale: 1.05;
}

.Sponsors a div {
	display: flex;
	flex-direction: row;
	height: inherit;
	width: fit-content;
}

.Sponsors a div div {
	display: flex;
	flex-direction: column;
	padding-left: 5svw;
	max-width: 60ch;
}

.Sponsors a h3 {
	display: flex;
	width: fit-content;
	border-bottom: var(--sponsorBorder);
}

.Sponsors a img {
	max-height: 24svh;
	width: 24svw;
	padding-top: 1svh;
	padding-bottom: 1svh;
}

.sponsorCenter {
	display: flex;
	justify-content: center;
}

.sponsorGridContainer {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-gap: 20px;
}

.sponsorGridItem {
	background-color: aqua;
	width: calc(100%- 20px);
	height: 100%;
}

.sponsorGridContainer .sponsorGridItem div div {
	flex: 1;
	padding-left: 1svw;
}

.sponsorGridItem h3 {
	text-align: center;
	justify-content: center;
	align-items: center;
}

.sponsorGridItem {
	grid-column: span 1;
}