.monster-page {
   width: 100%;
}

.monster-narrative-wrap {
   width: 100%;
   overflow: hidden;
   margin-top: 10px;
}

.monster-portrait {
   float: left;
   width: 600px;
   height: auto;
   margin-right: 24px;
   margin-bottom: 18px;
   border-radius: 18px;
   display: block;
}

.monster-narrative {
   width: auto;
}

.monster-hero-wrap {
   width: 100%;
   text-align: center;
   margin-top: 24px;
   margin-bottom: 18px;
}

.monster-hero {
   width: 1080px;
   height: auto;
   max-width: 100%;
   border-radius: 18px;
   display: inline-block;
}

.ffmerchpromo {
  display: block;
  margin: 10px 0 18px 0;
}

.ffmerchpromo__img {
  float: left;
  width: 300px;
  height: 200px;
  margin: 0 15px 10px 0;
  display: block;
}

.ffmerchpromo__text {
  margin: 0;
}

.ffmerchpromo__clear {
  clear: both;
  height: 0;
  overflow: hidden;
}

@media (max-width: 640px) {
  .ffmerchpromo__img {
    float: none;
    margin: 0 0 10px 0;
  }
  .ffmerchpromo__clear {
    display: none;
  }
}

@media (max-width: 1000px) {
   .monster-portrait {
      width: min(260px, 45%);
      margin-right: 18px;
      margin-bottom: 14px;
   }
}

@media (max-width: 800px) {
   .monster-portrait {
      width: clamp(180px, 32vw, 240px);
   }
}

@media (max-width: 420px) {
   .monster-portrait {
      width: 180px;
      margin-right: 16px;
      margin-bottom: 12px;
      border-radius: 14px;
   }
}