#education {
 width: 100%;
 padding-top: 20px;
}

#education .container {
 width: 100%;
 box-sizing: border-box;
 padding: 15px 10% 30px;
}
#education .edu_tree {
 width: 100%;
 display: grid;
 grid-template-columns: 1fr max-content 1fr;
 column-gap: 20px;
 color: #f6f6f6;
 font-size: 0.9rem;
}
#education .leaf.left {
 text-align: right;
}
#education .leaf h3,
#education .leaf p {
 margin: 0 0 10px 0;
}
#education .branch .line,
#education .branch .point {
 background-color: #cea27f;
}
#education .branch .line {
 display: block;
 width: 3px;
 height: 100%;
 transform: translate(6px, -5px);
}
#education .branch .point {
 width: 15px;
 height: 15px;
 border-radius: 50%;
 display: block;
}

@media only screen and (max-width: 500px) {
 #education .container {
  padding: 15px 5% 20px;
 }
 #education .leaf {
  font-size: 0.8rem;
 }
}
@media only screen and (max-width: 300px) {
 #education .edu_tree{
  column-gap: 15px;
 }
 #education .leaf h3 {
  font-size: 0.9rem;
 }
}
@media only screen and (max-width: 250px) {
 #education .container {
  padding: 15px 5px 20px;
 }
}