diff --git a/css/style.css b/css/style.css
index c6d23ee..7ec1f21 100755
--- a/css/style.css
+++ b/css/style.css
@@ -150,6 +150,7 @@ h2.logoInner
 	font-family: 'Butler', serif;
 	font-size: 1em;
 	font-weight: 400; 
+	width: 50%;
 }
 
 .biop
@@ -159,6 +160,7 @@ h2.logoInner
 	font-size: 0.2em;
 	font-weight: 500;
 }
+
 .biominus
 {
 	font-size: 0.7em;
@@ -182,30 +184,6 @@ h2.logoInner
 	transform-origin: top left;
 }
 
-@media (max-height: 899px) 
-{
-	.hbio
-	{
-		position: absolute;
-		right: 0;
-		top: 0;
-		transform: rotate(0.75turn) translateX(-850%);
-		transform-origin: top left;
-	}
-}
-
-@media (orientation: portrait) 
-{
-	.hbio
-	{
-		position: absolute;
-		right: 0;
-		top: 0;
-		transform: rotate(0.75turn) translateX(-700%);
-		transform-origin: top left;
-	}
-}
-
 #designers:after 
 {
 	content: " ";
@@ -214,13 +192,9 @@ h2.logoInner
 }
 
 div.designers
-{
-	position: absolute;
-	top: 0;
-	right: 0;
-	left: 0;
-	bottom: 0;
-	transform: translateY(12%);
+{ 
+	position: absolute; 
+	transform: translateY(-56%); 
 }
 
 .designers-all.designers-jess
@@ -236,24 +210,13 @@ img.designers
 }
 
 h2.designers
-{
-	position: absolute;
-	left: 69%;
-	top: 14%;
-	transform: rotate(0.75turn);
-	transform-origin: bottom;
-}
-
-@media (max-height: 899px), (orientation: portrait) 
-{
-	h2.designers
-	{
-		position: absolute;
-		left: 69%;
-		top: 10%;
-		transform: rotate(0.75turn);
-		transform-origin: bottom;
-	}
+{ 
+	position: absolute; 
+	left: 70%; 
+	top: 46%; 
+	margin-top: -300px; 
+	transform: rotate(-0.25turn) translateX(-100%); 
+	transform-origin: top left; 
 }
 
 .designers-all
@@ -281,18 +244,20 @@ figcaption.jess
 .abs-50-50
 {
 	position: absolute;
-	left: 50%;
+	left: 0%;
 	top: 50%;
+	right: 0%;
 }
 
 .test-grid
 {
-	display: grid;
-	grid-template-columns: 6% 44% 25% 19%;
-	height: 85%;
-	width: 82%;
+	display: flex;
+	justify-content: space-between;
+	max-height: 85%;
+	width: 77%;
 
-	transform: translate(-52%, -40%);
+	transform: translateY(-40%);
+	margin-left: 7%;
 }
 
 .col-1
@@ -335,49 +300,23 @@ figcaption.jess
 	width: 221px;
 }
 
-@media (max-width: 1050px) 
-{
-	.test-grid
-	{
-		display: grid;
-		grid-template-columns: 6% 60% 25%;
-		height: 85%;
-		width: 100%;
-
-		transform: translate(-50%, -40%);
-	}
-
-	.col-4
-	{
-		grid-column-start: 3;
-		grid-column-end: 3;
-	}
-
-	.test-quote
-	{
-		font-family: 'Butler', serif;
-		font-size: 2rem;
-		font-weight: 400; 
-		padding-bottom: 0;
-		text-align: center;
-	}
-}
-
 .all-links
 {
-	position: relative;
+	position: absolute;
 	transform: rotate(270deg) translateX(-100%);
 	height: 3rem;
 	width: 80vh;
 	max-width: 760px;
 	transform-origin: top left;
+	left: 0;
 }
 
+
 .test-h2
 {
 	position: absolute;
 	top: -4rem;
-	left: 6%;
+	left: 7%;
 }
 
 .link-p1
@@ -424,12 +363,13 @@ figcaption.jess
 
 .bigimg
 {
-	overflow: hidden;
+	padding-left: 5rem;
 }
 
 .smallimg
 {
 	max-height: 760px;
+	overflow: hidden;
 }
 
 .t-form
@@ -454,7 +394,7 @@ figcaption.jess
 
 .stgh-all
 {
-	transform: translate(-50%, -58%);
+	transform: translateY(-58%);
 	width: 100%;
 }
 
@@ -501,16 +441,6 @@ figcaption.jess
 	bottom:-72%;
 }
 
-@media (max-width: 1299px), (max-height: 740px) 
-{
-	.stgh-h2
-	{
-		position: absolute;
-		left: 2%;
-		bottom: -65%;
-	}
-}
-
 .stgh-h3
 {
 	margin-bottom: 15%;
@@ -520,3 +450,159 @@ figcaption.jess
 	font-weight: 400; 
 	font-size: 5.5rem;
 }
+
+@supports (display: grid) 
+{
+	.test-grid
+	{
+		display: grid;
+		grid-template-columns: 6% 44% 25% 19%;
+		justify-content: start;
+		width: 83%;
+
+		transform: translateY(-40%);
+	}
+
+	.all-links
+	{
+		position: relative;
+		transform-origin: top left;
+	}
+
+	.test-h2
+	{
+		left: 6%;
+	}
+
+	.bigimg
+	{
+		overflow: hidden;
+		padding-left: 0;
+	}
+}
+
+
+@supports (writing-mode: vertical-rl) 
+{
+	h2.designers
+	{
+		transform: rotate(-180deg) translateY(15%); 
+		transform-origin: center; 
+		writing-mode: vertical-rl; 
+	}
+
+	.t-form
+	{
+		transform: rotate(-180deg) translateY(15%);
+		transform-origin: center;
+		writing-mode: vertical-rl; 
+	}
+
+	.hbio
+	{
+		transform: rotate(-180deg) translate(5vw, -83vh);
+		transform-origin: center;
+		writing-mode: vertical-rl; 
+	}
+}
+
+@media (max-height: 899px) 
+{
+	.hbio
+	{
+		transform: rotate(0.75turn) translateX(-850%);
+	}
+
+	.test-grid
+	{
+		height: 85%;
+	}
+
+	@supports (writing-mode: vertical-rl) 
+	{
+		.hbio
+		{
+			transform: rotate(-180deg) translate(5vw, -700%);
+			transform-origin: center;
+			writing-mode: vertical-rl; 
+		}
+	}
+}
+
+@media (orientation: portrait) 
+{
+	.hbio
+	{
+		transform: rotate(0.75turn) translateX(-700%);
+	}
+
+	@supports (writing-mode: vertical-rl) 
+	{
+		.hbio
+		{
+			transform: rotate(-180deg) translate(5vw, -700%);
+			transform-origin: center;
+			writing-mode: vertical-rl; 
+		}
+	}
+}
+
+@media (max-width: 1050px) 
+{
+	.test-grid
+	{
+		display: flex;
+		justify-content: space-between;
+		width: 95%;
+		max-width: 95%;
+
+		transform: translateY(-40%);
+		margin-left: 0%;
+	}
+
+	.col-4
+	{
+		grid-column-start: 3;
+		grid-column-end: 3;
+	}
+
+	.test-quote
+	{
+		padding-bottom: 0;
+	}
+
+	.all-links
+	{
+		left: 2rem;
+	}
+
+	@supports (display: grid) 
+	{
+		.test-grid
+		{
+			display: grid;
+			grid-template-columns: 6% 60% 25%;
+			justify-content: start;
+			width: 100%;
+			max-width: 100%;
+			margin-left: 1%;
+
+			transform: translateY(-40%);
+		}
+
+		.all-links
+		{
+			left: 0;
+		}
+
+	}
+}
+
+@media (max-width: 1299px), (max-height: 740px) 
+{
+	.stgh-h2
+	{
+		left: 2%;
+		bottom: -65%;
+	}
+}
diff --git a/index.html b/index.html
index e050dde..75177af 100755
--- a/index.html
+++ b/index.html
@@ -36,9 +36,9 @@ <h2 class="hbio">Biography</h2>
 						<div class="bimgdiv">
 							<img class="bioimg obj-fit" src="pic/katy.png" alt="Katya Mills Photo">
 						</div><div class="biodiv">
-							<h3 class="bioh3">Katya<br>Mills</h3>
+							<h3 class="bioh3">Katya Mills</h3>
 							<p class="biop">Art Director<br>
-							Scenography / Styling / Creative photography / Design</p>
+							Scenography / Styling / Creative&nbspphotography&nbsp/ Design</p>
 							<p class="biominus">-</p>
 							<blockquote class="biobq">“The more I deal with the work as something that is my own, 
 							as something that is personal, the more successful it is.”</blockquote>
@@ -48,7 +48,7 @@ <h3 class="bioh3">Katya<br>Mills</h3>
 				<!-- информационный блок -->
 				<section id="designers">
 					<h2 class="designers">Designers</h2>
-					<div class="designers">
+					<div class="abs-50-50 designers">
 						<figure class="designers-all designers-jess roboto-light-1rem">
 							<img class="designers" src="pic/jess.png" alt="Jess Wonder Photo">
 							<figcaption class="jess">
@@ -133,7 +133,7 @@ <h3 class="stgh-h3">Strengths</h3>
 								<img src="pic/stgh2.png" alt="Strengths third Image">
 							</div>
 						</div>
-					<div>
+					</div>
 				</section>
 			</article>
 		</main>