section.lp-m-mark30th-trivia{
  padding-top:40px;
  .trivia-button{
    margin:40px auto;
    pointer-events:none;
  }
  .trivia-group{
    max-width:740px;
    margin-inline:auto;
    padding:40px 20px 0;
    @media screen and (max-width:768px) {
      padding:40px calc(20px + 1em) 0;
    }
    hgroup{
      .trivia-num{
        font-weight:600;
      }
      h2{
        margin:.25em 0;
        font-weight:500;
        color:var(--text-color);
        text-align:left;

      }
    }
    figure{
      figcaption{
          margin-top:0.5em;
          color:#666;
          text-align:center;
        }
      &.single-image{
        img{
          text-align:center;
          margin-inline:auto;
        }
      }
      }
    .trivia-images-grid{
      display:grid;
      grid-template-columns:repeat(2, 1fr);
      gap:10px;
      margin-top:20px;
      align-items:center;
      .trivia-image-item{
        img{
          width:100%;
          height:auto;
          object-fit:cover;
        }
      }
      &.single-column{
        @media (max-width: 768px) {
          grid-template-columns:1fr;
          gap:15px;
        }
      }
    }
    .trivia-video{
      margin-top:20px;
      .video-wrapper{
        position:relative;
        width:100%;
        height:0;
        padding-bottom:56.25%; /* 16:9 aspect ratio */
        iframe{
          position:absolute;
          top:0;
          left:0;
          width:100%;
          height:100%;
          border-radius:4px;
        }
      }
    }
    .trivia-custom-html{
      margin-top:20px;
    }
    .trivia-button-container{
      margin-top:20px;
      text-align:right;
      .trivia-external-button{
        display:inline-flex;
        align-items:center;
        gap:12px;
        padding:0;
        background-color:transparent;
        color:#666;
        text-decoration:none;
        border:none;
        font-size:14px;
        font-weight:400;
        transition:all 0.2s ease;
        svg{
          width:24px;
          height:12px;
          flex-shrink:0;
        }
        &:hover{
          color:#333;
          svg{
            transform:translateX(2px);
          }
        }
      }
    }
  }
  .back-button{
    text-align:center;
    margin:80px auto 60px;
    @media screen and (max-width: 768px) {
      margin:60px auto 60px;
    }
    a{
      color:var(--blue);
      text-decoration:none;
      max-inline-size:max-content;
      border: 1px solid var(--blue);
      padding:.25em 2em .4em;
      font-weight:600;
      transition:.2s;
      &:hover{
        color:white;
        background:var(--blue);
      }
    }


  }
}