.about{
  padding: 65px 20px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  background: url('/images/haikei.svg') no-repeat center center/cover;
  background-attachment: fixed;
  z-index: 10;
}

.about h1{
    width: 100%;
    text-align: center;
    color: orange;
    margin-bottom: 20px;
    font-size: 25px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.about .pics{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    justify-content: center;
    width: 100%;
    margin: 0 auto;
    grid-gap: 5px;
}

.about .pics .pic{
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
}

.about .pics .pic::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background: #00000083;*/
    transition: 0.2s;
    box-shadow: 9px -116px 136px -48px rgba(0,0,0,0.73) inset;
    -webkit-box-shadow: 9px -116px 136px -48px rgba(0,0,0,0.73) inset;
    -moz-box-shadow: 9px -116px 136px -48px rgba(0,0,0,0.73) inset;
}

.about .pics .pic:hover::before{
    /*background: transparent;
    box-shadow: none;*/
    box-shadow: -16px -46px 62px -22px rgba(0,0,0,0.73) inset;
    -webkit-box-shadow: -16px -46px 62px -22px rgba(0,0,0,0.73) inset;
    -moz-box-shadow: -16px -46px 62px -22px rgba(0,0,0,0.73) inset;
}

.about .pics .pic h2{
    position: absolute;
    bottom: 10px;
    font-size: 13px;
    text-transform:uppercase;
    text-align: left;
    left: 10px;
    /*transform: translate(-50%, 0);*/
    color: #fff;
    font-style: italic;
    cursor: default;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.about .pics .pic img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 600px){
    .about{
    padding: 65px 0;
    }
    .about .pics .pic img{
    width: 100%;
    height: auto;
    object-fit: cover;
    }
    .about .pics{
    grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
    }
}