<div class="panels-section angled-section panels-angled-section">
  <div class="angled-section-container panels-section-container">
    <div class="np-homepage-headline-mini np-header-font-color">
      More Mizuno Academies
    </div>


    <div class="panels-container col-md-12">
      <div class="panel-item col-xs-12 col-md-3-25">
        <a class="panel-img-container" href="#">
          <img class="panel-img" src="https://s3.amazonaws.com/static.northpass.com/Mizuno+Golf/Mizuno_Academy_Golf_image.png">
        </a>
        <h1 class="panel-content-title">GOLF</h1>
      </div>
      <div class="panel-item col-xs-12 col-md-3-25">
        <a class="panel-img-container" href="#">
          <img class="panel-img" src="https://s3.amazonaws.com/static.northpass.com/Mizuno+Golf/Mizuno_Academy_running_image.png">
        </a>
        <h1 class="panel-content-title">RUNNING</h1>
      </div>
      <div class="panel-item col-xs-12 col-md-3-25">
        <a class="panel-img-container" href="#">
          <img class="panel-img" src="https://s3.amazonaws.com/static.northpass.com/Mizuno+Golf/Mizuno_Academy_team_sports_image.png">
        </a>
        <h1 class="panel-content-title">TEAM SPORTS</h1>
      </div>
    </div>
  </div>
</div>

<style>
.panels-angled-section{
  background: #001588;
  transform: skewY(4deg);
  margin-bottom: 77px;
  text-align: center;
}

.panels-section-container {
  transform: skewY(-4deg);
  width: 80%;
}

.panels-container{
  display: flex;
  flex-direction: column;
  margin: 10px 0;
}

.panel-item {
  display: flex;
  flex-direction: column;
}

.panel-img-container{
  border-bottom: 3px solid #ffffff;
  display: flex;
  height: 100%;
  width: 100%;
}

.panel-img{
  max-width: 100%;
}

.panel-content-title {
  color: #ffffff;
  font-size: 1.25em;
}

@media only screen and (min-width: 768px){
  .panels-container{
    flex-direction: row;
    justify-content: space-between;
  }

  .col-md-3-25{
    flex-basis: 27%;
    max-width: 27%;
  }
}


</style>