#characters {text-align:center;font-size:.75em;color:#707070;padding:1em;position:relative}
#characters .section-header{text-align:center;font-size:clamp(1em,8vw,2em);position:relative;z-index:3;color:#4DE1AE;text-wrap:nowrap;background:url(../media/img/purchase/purchase-header-bg.png) center center / contain no-repeat;padding:.25em 0 .45em;margin-top:-2em;}
#characters .postcard{background-color:#fff;background-image:repeating-linear-gradient(-45deg,transparent 0 20px,#ffafc9 20px 30px,transparent 30px 50px,#a2ceff 50px 60px);position:relative;border-radius:15px;margin-top:5em;margin-bottom:5em;padding:1em}
#characters .postcard::before{content:'';background-color:#f4f4e7;width:calc(100% - 10px);height:calc(100% - 10px);position:absolute;top:5px;left:5px;z-index:0}
#characters .feature-flags{position:absolute;z-index:5;top:0;right:0;left:0;margin:auto;width:1920px;max-width:100%}
#characters .feature-flags img{position:absolute;right:0;max-width:30%}
#characters .feature-stamps{position:absolute;z-index:1}
#characters .stamp-1{z-index:5;top:0;left:0;transform:translate(-50%,-50%);width:23%}
#characters .stars-1{top:6%;left:5%;max-width:30%}
#characters .stars-2{top:27%;right:5%;max-width:30%}
#characters .banana-stamp{top:40%;right:5%;max-width:30%}
#characters .stars-3{bottom:1%;right:15%;max-width:30%}
#characters .postcard-stamp{bottom:30%;left:25%;max-width:100%}
#characters .washi{position:absolute;z-index:8;bottom:-25px;right:0;left:0;margin:auto;width:1920px;max-width:100%}
#characters .washi img{position:absolute;bottom:-20px;left:80%;width:300px}
#characters .features-section{position:relative;z-index:1}
#characters .features-col,#characters .features-card{margin:auto;position:relative}
#characters .features-card .features-card-header{background:url(../media/img/features/feature-header-bg.png) center center / contain no-repeat;color:#fff;font-size:.7em;text-shadow:3px 3px 0 rgba(0,0,0,0.5);text-transform:uppercase;margin-bottom:-2em;z-index:2;position:relative;line-height:1.5em;padding:2em 0}
#characters .features-card{width:587px;max-width:100%;margin-bottom:45px}
#characters .features-card img{border:4px solid #fff;box-shadow:4px 4px 3px rgba(0,0,0,0.15)}
#characters .features-card p{text-align:center}
@media screen and (min-width: 1024px) {
    #characters {font-size:1.5em}
    #characters .postcard{padding:2em 1em;background-image:repeating-linear-gradient(-45deg,transparent 0 35px,#ffafc9 35px 55px,transparent 55px 90px,#a2ceff 90px 110px)}
    #characters .postcard::before{width:calc(100% - 20px);height:calc(100% - 20px);top:10px;left:10px}
    #characters .stars-1{top:10%;left:5%;max-width:30%}
    #characters .stars-2{top:10%;right:5%;max-width:30%}
    #characters .features-col{max-width:50%}
    #characters .features-card p{text-align:left}
    #characters .features-content{display:flex;justify-content:center;align-items:center;margin:auto}
    #characters .washi img{bottom:0;left:85%;width:auto}
}

.character-grid {
  position: relative;
  display: grid;
  grid-template-rows: 20px clamp(250px, 70vw, 600px) clamp(300px, 100vw, 650px) 1fr 20px;
}

.character-select {
  grid-row: 2 / 3;
}

.character-image {
  grid-row: 3 / 4;
}

.character-description {
  grid-row: 4 / 5;
}

@media screen and (min-width: 600px) {
  .character-grid {
    display: grid;
    grid-template-columns: 20px repeat(12, 1fr) 20px;
    /* grid-template-rows: 20px 600px 60px 200px 20px; */
    grid-template-rows: 20px clamp(300px, 39vw, 700px) 350px 20px;
    align-items: center;
    justify-content: center;
  }

  .character-select {
    grid-column: 2 / 9;
    grid-row: 2 / 3;
  }

  .character-image {
    grid-column: 9 / 14;
    grid-row: 2 / 3;
  }

  .character-description {
    text-align: center;
    grid-column: 2 / 14;
    grid-row: 3 / 4;
  }
}

@media screen and (min-width: 1024px) {
  .character-description {
    grid-column: 3 / 13;
  }

  .description-text {
    font-size: 1.3em;
    }
}

.character-description {
  background: #fcf3dc;
  border: 5px solid #fff;
  border-radius: 15px;
  position: relative;
  overflow: hidden;
  padding: 0.25em 2em 1em;
  font-size: clamp(18px, 1vw, 32px);
  color: #707070;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.56);
}

.character-list {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}

.character-list .character-thumb {
  cursor: pointer;
  opacity: 0.8;
  transition: transform 0.1s ease-out;
}
@media (hover: hover) {
  .character-list .character-thumb:hover {
    transform: scale(1.25);
    opacity: 1;
  }
}
.character-list .character-thumb.active {
  opacity: 1;
}
.character-list .character-thumb img {
  pointer-events: none;
}

.character-image .portrait {
  min-width: 75%;
}

.sega-pass-header {
  margin: 0 auto 10px;
  width: 50%;
}

.character-name h1 {
  position: relative;
  z-index: 2;
  color: #fc0;
}
.character-name h1:after {
  content: attr(data-text);
  -webkit-text-stroke: 7px #fff;
  color: #fff;
  text-shadow: 0 5px 4px rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: -1;
}