main .articles {
  margin-top: 60px;
  box-sizing: border-box;
  display: flex;
  width: calc(100% + 5vw);
  flex-wrap: wrap;
}
main article {
  margin-top: 130px;
  margin-right: 2vw;
  width: calc(33.333% - 2vw);
}
main article a {
  background: rgba(255,255,255,0.6);
  border-radius: 15px;
  display: block;
  position: relative;
  padding: 20px 20px 100px 20px;
  height: 100%;
  box-sizing: border-box;
}
main article a:hover { background: #fff;}
main article a figure { text-align: center;}
main article a figure img { border-radius: 10px;margin-top: -60px; height: auto;}
main article a .date { font-size: 12px; font-weight: 600;}
main article a h3 { font-size: 18px; font-weight: bold;}
main article a p { font-size: 86%;}
main article a .arrow {
  right: 40px;
  bottom: 50px;
  top: auto;
}
@media only screen and (max-width: 782px) {
  main .articles {
    margin-top: 30px;
    display: block;
    width: auto;
  }
  main article {
    margin-top: 65px;
    margin-right: 0;
    width: auto;
  }
  main article a {
    border-radius: 8px;
    padding: 0 7.5vw 60px 7.5vw;
    height: auto;
    
  }
  main article a figure { }
  main article a figure img { border-radius: 5px;margin-top: -40px; width: 100%; height: auto;}
  main article a .date { font-size: 8px;}
  main article a h3 { font-size: 13px; }
  main article a .arrow {
    right: calc(7.5vw + 15px);
    bottom: 30px;
  }
}