.one {
  background: #FFF4ED;
  padding: 20px 20px;
  text-align: center;
}
.one h1 {
  font-family: 'Righteous', cursive;
  position: relative;
  color: #3CA1D9; 
  display: inline-block;
  border-top: 1px solid;
  border-bottom: 1px solid;
  font-size: 3em;
  padding: 2px 30px;
  margin: 0; 
  line-height: 1;
}
.one h1:before, .one h1:after {
  content: ""; 
  position: absolute;
  top: 0;
  width: 20px;
  height: 100%;
  border-left: 2px solid;
  border-right: 2px solid;
  background: repeating-linear-gradient(180deg, transparent, transparent 2px, #3CA1D9 2px, #3CA1D9 4px);
}
.one h1:before {left: 0;}
.one h1:after {right: 0;}
@media (max-width: 420px) {
  .one h1 {font-size: 2em;}
}
/*Создаем блок любого названия*/
.test {
width: 350px; /*Указываем длину изображения*/
height: 200px; /*Указываем ширину изображения*/
transition: 0.9s; /*Указываем время увеличения картинки*/
overflow: hidden;
}
/*Теперь создаем hover для блока*/
.test:hover {
-webkit-transform: scale(2.3); /*Указываем величину изображения при анимации*/
-ms-transform: scale(3.3); /*Указываем величину изображения при анимации*/
transform: scale(2.2); /*Указываем тип увеличения*/
overflow: hidden;
}


.two {
  background: #E4E5D2;
  padding: 20px 20px;
  text-align: center;
 
} 
.two h1 {
   font-family: 'Righteous', cursive;
  position: relative;
 color: #3CA1D9; 
  font-size: 1.5em;
  font-weight: normal;
  line-height: 1;
  padding: 3px 0;
  margin: 0;
  display: inline-block;
}
.two h1:before {
  content: ""; 
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 40%;
  height: 100%;
  border-radius: 50%/30%;
  border: 6px solid #3CA1D9;
  border-left-color: transparent;
  border-right-color: transparent;
}

@media screen and (max-width: 700px){
	.test {width: 100%}
}