/*
 * League article hero isolation
 * Prevent the global homepage .hero rules from adding padding, margins and
 * the football-heroes background behind league cover artwork.
 */
body.league-article-page main article > figure.hero {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  min-height: 0;
  aspect-ratio: 16 / 9;
  margin: 0;
  padding: 0;
  position: relative;
  overflow: hidden;
  background: #070706;
}

body.league-article-page main article > figure.hero > img {
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
  padding: 0;
  object-fit: cover;
  object-position: center 32%;
}

@media (max-width: 700px) {
  body.league-article-page main article > figure.hero {
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 9;
    background: #070706;
  }

  body.league-article-page main article > figure.hero > img {
    object-fit: cover;
    object-position: 60% center;
  }
}

/* ปกลีกโดนกฎ .hero ของหน้าแรก (padding + height) ทับอยู่หลายชั้น จนภาพเหลือแถบบาง ๆ กลางกรอบ
   หน้านี้ปกเป็นภาพเดี่ยว ไม่ใช่ hero ของหน้าแรก จึงบังคับค่าให้ชนะทุกชั้น */
body.league-article-page main article > figure.hero{
  padding: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 9 !important;
  display: block !important;
}
body.league-article-page main article > figure.hero > img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 32% !important;
  margin: 0 !important;
}
@media(max-width:700px){
  body.league-article-page main article > figure.hero{aspect-ratio: 4 / 3 !important}
  body.league-article-page main article > figure.hero > img{object-position: 60% center !important}
}