.featurePic, .prodPic {
  width:100vw;
  aspect-ratio:1200 / 800;
}
.prodVid {
  aspect-ratio:16 / 9;
  width:100vw;
  background-color:#00000080;
}

.prodForAges p::before {
  content: url("data:image/svg+xml,%3Csvg width='26px' height='24px' version='1.1' viewBox='0 0 26 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='8,0 16,24 0,24' style='fill:%23ffffff60;stroke-width:0' /%3E%3C/svg%3E");
  position:relative;
  bottom:-5px;
}

.prodContent {
  line-height:1.5;
  background-color:#fff;
  display:grid;
  grid:"prodText" auto
    "prodForAges" auto
    "prodVideo" auto
    "prodWhere" auto
    "prodPic" auto
    / auto;
}
.prodText {
  grid-area: prodText;
  padding:30px;
}
.prodText div {
  line-height:1.5;
  margin-top:1em;
  margin-bottom:1em;
}
.prodText div:first-child {
  margin-top:0em;
}
.prodText div:last-child {
  margin-bottom:0em;
}
.prodTextWhere {
  display:contents;
}
.prodForAges {
  grid-area: prodForAges;
  padding:15px 30px;
  background-color:var(--col-foot-blog);
  color:#fff;
  display:flex;
  width:100%;
  justify-content:space-between;
  flex-direction:row;
  gap:10px;
  font-family:'Roboto Condensed';
  font-style:normal;
  font-weight:600;
}

.prodVideo {
  grid-area: prodVideo;
}
.prodWhere {
  grid-area: prodWhere;
  padding:0 30px 30px 30px;
}
.prodPic {
  grid-area: prodPic;
}

.prodForAges p {
  margin:0;
  text-indent:-27px;
  padding-left:27px;
}

@media (min-width:600px) {
  .prodContent {
    grid:"prodTextWhere prodVideo" auto
    "prodTextWhere prodForAges" auto
    "prodTextWhere prodPic" 1fr / 1fr;
  }
  .prodTextWhere {
    grid-area: prodTextWhere;
    display:block;
  }
  .prodPic {
    align-self: end;
  }
  .prodForAges {
    background-color:transparent;
    color:#000;
    padding:15px 15px 15px 0;
  }
  .prodForAges p::before {
    content: url("data:image/svg+xml,%3Csvg width='26px' height='24px' version='1.1' viewBox='0 0 26 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='8,0 16,24 0,24' style='fill:%23f7c600;stroke-width:0' /%3E%3C/svg%3E");
  }
  .prodForAges svg {
    margin-bottom:-10px;
  }
  .prodForAges p {
    margin:10px 0;
  }
  .prodForAges p:first-child {
    margin:0 0 10px 0;
  }
  .prodForAges p:last-child {
    margin:10px 0 0 0;
  }
  .featurePic, .prodPic, .prodVid, .prodForAges {
    width:43.8vw;
  }
}

@media (min-width:1270px) {
  .featurePic, .prodPic, .prodVid, .prodForAges {
    width:600px;
  }
}
.prodMainTitle {
  padding:10px 30px;
  margin-top:0;
  font-size:calc( min( 12px + 4vw, 48px ));
}
h1.prodMainTitle p {
  margin-top:0;
}
.prodSubTitle {
  font-family: 'Roboto Condensed';
  font-style: italic;
  font-weight: 600;
  padding-top: 5px;
  font-size:calc( min( 12px + 1vw, 24px ));
}

.expander {
  padding-left:20px;
  position:relative;
  overflow:hidden;
}
.expandChk {
  position:absolute;
  left:-100px;
}
.expandTitle {
  display:block;
  font-family:'Roboto Condensed';
  font-style:normal;
  font-weight:700;
  cursor:pointer;
  line-height:1.5;
  padding:15px 0 5px 0;
}
@media (min-width:600px) {
  .expandTitle[for="expandChk1"] {
    padding:0 0 5px 0;
  }
}
div.expandContent > div {
  overflow:hidden;
}
.expandContent div {
  line-height:1.5;
  margin-top:1em;
  margin-bottom:1em;
}
.expandContent div:first-child {
  margin-top:0.1em;
}
.expandContent div:last-child {
  margin-bottom:0.1em;
}
.expandContent {
  transition: grid-template-rows 400ms ease-out;
  display: grid;
  grid-template-rows: 0fr;
}
.expandTitle::before {
  position:absolute;
  left:0;
  font-size:32px;
  margin-top:-12px;
}
.expandChk:not(:checked)~.expandTitle::before {
  content:"+";
}
.expandChk:checked~.expandTitle::before {
  content:"-";
}

.expandChk:not(:checked)~.expandContent {
  grid-template-rows: 0fr;
}
.expandChk:checked~.expandContent {
  grid-template-rows: 1fr;
}
.howToPlay, .tryMe {
  background-color:var(--col-try);
  color:#000;
  display:flex;
  justify-content:space-around;
  align-items:center;
  font-family:'Roboto Condensed';
  font-style:normal;
  font-weight:700;
  line-height:0.9;
  letter-spacing:-1px;
  font-size:calc( min( 10px + 1vw, 20px ) );
  width:4em;
  height:4em;
  border-radius:50%;
  cursor:pointer;
  text-align:center;
  text-decoration:none;
  text-transform:uppercase;
  transform:rotate(-10deg);
  transition:all ease-in-out 300ms;
  animation:wiggle 800ms linear 1;
}
.howToPlay {
  animation-delay:100ms;
}
.tryMe {
  animation-delay:200ms;
}
.howToPlay:hover, .tryMe:hover {
  transform:scale(1.1);
  filter:drop-shadow(0 0 3px #00000080);
}
.prodAgesBtns {
  display:flex;
  flex-direction:row;
  align-self:center;
  gap:20px;
}
@media (min-width:600px) {
  .howToPlay, .tryMe {
    font-size:calc( min( 7px + 1vw, 20px ) );
  }
}

.tryMeInlineHand {
  display:flex;
  align-items:end;
  justify-content:flex-end;
  width:100%;
  height:100%;
  padding:0 20px 40px 0;
}
.tryMeInlineHand svg {
  width:15vw;
  height:15vw;
}
@media (min-width:600px) {
  .tryMeInlineHand svg {
    width:150px;
    height:150px;
  }
}
#tryMeInlineDialog {
  padding:0;
  border:2px solid #000;
  border-radius:3px;
}
#tryMeInlineDialog:focus {
  outline:0;
}
#tryMeInlineDialog img, #tryMeInlineDialog div {
  position:absolute;
  top:0;
  left:0;
}
#tryMeInlineDialog img:first-child {
  position:relative;
}
#tryMeInlineDialog::backdrop, #tryMeInlineDialogArticulate::backdrop {
  background-color: #000000c0;
}
#tryMeInlineDialogArticulate {
  padding:10px;
  background-color:#a80200;
}
#tryMeInlineDialogArticulate h2 {
  margin-top:0;
  text-align:center;
}
.tryMeArtLogo {
  margin:0 auto;
  width:300px;
  aspect-ratio: 628 / 158;
}
.tryMeArtBox div {
  max-width:250px;
  color:#fff;
  flex:1;
}
.tryMeArtBox a {
  display:flex;
  flex-direction:row;
  justify-content:space-between;
  align-items:center;
  text-decoration:none;
  cursor:pointer;
  gap:10px;
}
.tryMeArtBox a:focus {
  outline:0;
}
.tryMeArtBox {
  display:flex;
  flex-direction:column;
  gap:30px;
  margin-top:40px;
}
.tryMeArtBox svg {
  margin-bottom:0;
  width:20px;
  height:40px;
}

.tryMeArtBox1 {
  width:30px;
  height:30px;
  margin:0 15px;
}

.tryMeArtBox2 {
  width:60px;
  height:30px;
}

@media (min-width:600px) {
  .tryMeArtBox1 {
    width:102px;
    height:101px;
    margin:0 50px;
  }

  .tryMeArtBox2 {
    width:201px;
    height:101px;
  }
  .tryMeArtBox a {
    gap:10px;
  }
  #tryMeInlineDialogArticulate {
    padding:30px;
  }
  #tryMeInlineDialogArticulate h2 {
    font-size:86px;
  }
  .tryMeArtBox svg {
    width:50px;
    height:100px;
  }
}