:root {
	--padding: 32px;
	--shadow: 0px 1px 1px rgba(111, 108, 147, 0.02),
		0px 5px 4px rgba(111, 108, 147, 0.03), 0px 12px 9px rgba(111, 108, 147, 0.05),
		0px 20px 15px rgba(111, 108, 147, 0.06),
		0px 32px 24px rgba(111, 108, 147, 0.08);
}

html,
body {
	background: ghostwhite;
	font-family: "Inter Variable", sans-serif;
}

body {
	padding: var(--padding);
}

*,
ul,
li {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

.wrapper {
	width: 100%;
	max-width: 1400px;
	margin: 0 auto;
}

.topbar {
	background: white;
	box-shadow: var(--shadow);
	padding: var(--padding);
	margin-bottom: var(--padding);
	border-bottom: 3px solid #212121;
	display: flex;
	justify-content: space-between;
}

.topbar .logo {
	flex-basis: 400px;
}

.topbar .logo svg {
	max-width: 100%;
}

.topbar .content {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.topbar .content a {
	display: flex;
	gap: 12px;
	place-content: center;
	place-items: center;
	text-decoration: none;
	color: #212121;
	box-shadow: 0 0 0 1px #212121;
	padding: 12px 24px;
	transition-duration: 300ms;
}

.topbar .content a:hover {
	background-color: #212121;
	color: white;
}

.companies {
	display: flex;
	list-style: none;
	gap: 24px;
}

.companies > a {
	position: relative;
	display: flex;
	flex-direction: column;
	background: white;
	padding: var(--padding);
	gap: var(--padding);
	flex: 1;
	place-content: space-between;
	text-decoration: none;
	color: #111;
	border: 3px solid transparent;
	transition-duration: 300ms;
	box-shadow: var(--shadow);
}

.companies > a:hover {
	transform: translateY(-8px);
	border-color: var(--main-color);
}

.companies > a:active {
	transform: translateY(-4px);
}

.companies > * {
	user-select: none !important;
}

.companies .logo svg {
	height: 64px;
	width: auto;
}

.content ul {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.content ul li {
	display: flex;
	gap: 12px;
	align-items: center;
}

.content ul li:before {
	content: "";
	display: inline-flex;
	width: 20px;
	height: 20px;
	background-image: url('data:image/svg+xml,<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.5 12L10.5 15L16.5 9M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z" stroke="mediumseagreen" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}

.button {
	margin: 0 calc(var(--padding) * -1 - 3px);
	border-bottom: 3px solid var(--main-color);
	transform: translateY(calc(var(--padding) + 3px));
	display: flex;
	justify-content: flex-end;
}

.button .icon-wrapper {
	display: flex;
	place-items: center;
	place-content: center;
	width: 40px;
	height: 40px;
	background: var(--main-color);
	text-decoration: none;
	color: #111;
}

.button svg {
	width: 24px;
	height: 24px;
}

.button path {
	stroke: white;
}

@media (max-width: 756px) {
	:root {
		--padding: 24px;
	}
	.companies {
		flex-direction: column;
	}
	.companies .logo svg {
		height: 54px;
		width: auto;
	}
	.topbar {
		flex-direction: column;
		gap: 24px;
	}
	.topbar .logo {
		flex-basis: auto;
	}
	.topbar .content a {
		gap: 8px;
		padding: 12px;
	}
}