body { background-color: #777e88; }
header { color: #fff; }
header nav a { color: #fff; }
header .header-logo { background-image: url(/i/graphite-logo-inverse.svg); background-repeat: no-repeat; }
header .header-logo img { visibility: hidden; }
header .header-brief-button a { border-color: #fff; color: #fff; }

footer { color: #ccc; }
footer a { color: #fff; }

.work-header { color: #fff; }
.work-header p { color: #fff; }
.work-header a { color: #fff; }
.work-header p.work-www a:after { filter: invert(1); }

.browser { background: #435067; box-shadow: 70px 70px 100px rgba(0 0 0 / 30%); }
.pscable-index { position: relative; top: -12vw; }

.pscable-cables { background-color: #fff; padding: 5vh; }
.pscable-cables .pscable-cables-content {
	margin-bottom: 50px;
	text-align: center;
}
.pscable-cables .pscable-cables-bg {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(4, 1fr);
}
.pscable-cables .pscable-cables-bg img { border-radius: 10px; width: 100%; }

.pscable-stretch-height {
	align-items: stretch;
	display: flex;
	justify-content: space-between;
	margin: 0 auto;
	width: 85%;
}
.pscable-stretch-height > div:first-child { flex-basis: 76%; }
.pscable-stretch-height > div:last-child { flex-basis: 19%; }

.pscable-stretch-height .browser-content { padding: 0; }
.pscable-stretch-height img {
	height: 100%;
	width: 100%;
}

@media only screen and (min-width: 761px) and (max-width: 1400px) {
	.pscable-stretch-height { width: 90%; }
}

@media only screen and (max-width: 760px) {
	.pscable-stretch-height { width: 92%; }
	.pscable-stretch-height .browser,
	.pscable-stretch-height .browser .browser-content { border-radius: 5px; }
	
	.pscable-cables { padding: 200px 1vh 1vh; }
	.pscable-cables .pscable-cables-bg { gap: 5px; grid-template-columns: repeat(2, 1fr); }
}