/*****************************************************************************
 * Pillar header
 ***************************************************************************** */

.m-pillar-header { display: flex; flex-flow: column nowrap; justify-content: flex-end; padding: 2.7rem 0; position: relative; text-align: center; z-index: 10; }

/* -- Background -- */
.m-pillar-header picture { display: block; left: 0; height: 100%; position: absolute; top: 0; width: 100%; }
.m-pillar-header picture::after { background-image: linear-gradient(to top, #000000, rgba(0, 0, 0, 0)); bottom: 0; content: ''; display: block; left: 0; height: 80%; opacity: 0.7; position: absolute; width: 100%; }
.m-pillar-header picture img { display: block; height: 100%; object-fit: cover; width: 100%; }

/* -- Title -- */
.m-pillar-header .chapter-no { font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
.m-pillar-header h2 { font-size: 1.5rem; font-weight: 400; line-height: 1.2; margin: 0 auto; max-width: 780px; width: 100%: }


@media only screen and ( min-width: 576px ) {
  .m-pillar-header { padding: 6rem 0 2.7rem; }
  
  /* -- Title -- */
  .m-pillar-header .chapter-no { font-size: 2rem; }
  .m-pillar-header h2 { font-size: 2rem; }
}


@media only screen and ( min-width: 768px ) {  
  .m-pillar-header { padding: 10rem 0 2.7rem; }
  
  /* -- Title -- */
  .m-pillar-header .chapter-no { font-size: 2.5rem; }
  .m-pillar-header h2 { font-size: 2.5rem; }
}


@media only screen and ( min-width: 992px ) {  
  .m-pillar-header { padding: 14rem 0 2.7rem; }
}