diff --git a/history-timeline.css b/history-timeline.css
index 9011ad7..5b8294f 100644
--- a/history-timeline.css
+++ b/history-timeline.css
@@ -1,175 +1,117 @@
-/*This CSS file designs the styling for the history timeline
-  that is available to be viewed for each city.*/
-
 * {
   box-sizing: border-box;
 }
 
 body {
-  background-color: #20B2AA;
-  font-family: Helvetica, sans-serif;
+  background: #3594cc;
 }
 
-.timeline {
-  position: relative;
-  max-width: 1200px;
+.container {
+  max-width: 850px;
   margin: 0 auto;
 }
 
-.timeline::after {
-  content: '';
-  position: absolute;
-  width: 6px;
-  background-color: white;
-  top: 0;
-  bottom: 0;
-  left: 50%;
-  margin-left: -3px;
+.timeline {
+  display: grid;
+  grid-template-columns: repeat(2, auto);
 }
 
-.container {
-  padding: 10px 40px;
-  position: relative;
-  background-color: inherit;
-  width: 50%;
+.icon {
+  display: flex;
+  justify-content: center;
+  margin: 0 auto;
+  grid-column-start: 1;
+  grid-row: 1/3;
+  background: linear-gradient(to right, #3594cc 45%, #b1dcf5 45%, #b1dcf5 45%, #3594cc 50%);
+  color: #fff;
 }
 
-.container::after {
-  content: '';
-  position: absolute;
-  width: 25px;
-  height: 25px;
-  right: -17px;
-  background-color: white;
-  border: 4px solid blue;
-  top: 15px;
-  border-radius: 50%;
-  z-index: 1;
+/*Targets the <img> element rather
+  than the "image" class.*/
+img {
+  width: 100%;
 }
 
-.left {
-  left: 0;
+.image {
+  grid-column-start: 2;
+  margin-bottom: 10%;
+  grid-row-start: 2;
 }
 
-.right {
-  left: 50%;
+.image p {
+  text-align: center;
+  font-size: 24px;
+  font-weight: bold;
+  margin-top: 10px;
 }
 
-.left::before {
-  content: " ";
-  height: 0;
-  position: absolute;
-  top: 22px;
-  width: 0;
-  z-index: 1;
-  right: 30px;
-  border: medium solid white;
-  border-width: 10px 0 10px 10px;
-  border-color: transparent transparent transparent white;
+.text {
+  background: #fff;
+  text-align: center;
+  padding: 10px;
+  border-radius: 5px;
+  color: #383838;
+  padding-left: 10px;
+  transition: all .6s ease;
+  margin-bottom: 10%;
 }
 
-.right::before {
-  content: " ";
-  height: 0;
-  position: absolute;
-  top: 22px;
-  width: 0;
-  z-index: 1;
-  left: 30px;
-  border: medium solid white;
-  border-width: 10px 10px 10px 0;
-  border-color: transparent white transparent transparent;
+.text:hover {
+  background: bisque;
 }
 
-.right::after {
-  left: -16px;
+.text h2 {
+  margin: 0;
+  font-size: 18px;
+  text-transform: uppercase;
+  font-family: russo one;
+  letter-spacing: 2px;
 }
 
-.content {
-  padding: 20px 30px;
-  background-color: white;
-  position: relative;
-  border-radius: 6px;
+.text p {
+  line-height: 1.4;
+  font-family: montserrat;
 }
 
-@media screen and (max-width: 600px) 
-{
-  .timeline::after {
-    left: 31px;
-  }
-  
-  .container {
-    width: 100%;
-    padding-left: 70px;
-    padding-right: 25px;
-  }
-  
-  .container::before {
-    left: 60px;
-    border: medium solid white;
-    border-width: 10px 10px 10px 0;
-    border-color: transparent white transparent transparent;
+/*When the body's width is 640 pixels or larger.*/
+@media(min-width: 640px) {
+  .timeline {
+    grid-template-columns: 45% auto 45%;
   }
 
-  .left::after, .right::after {
-    left: 15px;
+  .text {
+    grid-column-start: 1;
   }
+
+  .switch-img-text-pos {
+    .text {
+      grid-column-start: 3;
+    }
   
-  .right {
-    left: 0%;
+    .image {
+      grid-column-start: 1;
+    }
   }
-}
-
-.img-right1 {
-  position: absolute;
-  left: 660px;
-  top: 10px;
-}
 
-.img-left1 {
-  position: absolute;
-  right: 660px;
-  top: 370px;
-}
-
-.img-right2 {
-  position: absolute;
-  left: 660px;
-  top: 705px;
-}
-
-.img-left2 {
-  position: absolute;
-  right: 660px;
-  top: 1020px;
-}
-
-.img-right3 {
-  position: absolute;
-  left: 660px;
-  top: 1435px;
-}
-
-.img-left4 {
-  position: absolute;
-  right: 725px;
-  top: 2350px;
-}
+  .icon {
+    /*Horizontal positioning*/
+    grid-column-start: 2;
+  }
 
-figcaption {
-  color: white;
-}
+  .image {
+    grid-column-start: 3;
 
-.img-lenin {
-  position: absolute;
-  right: 645px;
-  top: 1120px;
+    /*Vertical positioning*/
+    grid-row-start: 1;
+  }
 }
 
-.img-fontanka {
-  position: absolute;
-  left: 650px;
-  top: 1900px;
+span {
+  font-size: 20px;
+  background: #46a4da;
+  border-radius: 50px;
+  width: 50px;
+  height: 50px;
+  line-height: 40px;
+  border: 5px solid #b1dcf5;
 }
-
-/*145*/
\ No newline at end of file