/* =====================================================
       CONTENT PANEL
    ====================================================== */

    .survival-kit-page .content-panel {
      background: rgba(230,128,128,0.88);

      border: 3px solid rgba(0,0,0,0.14);
      border-radius: 22px;

      box-shadow: 0 12px 32px rgba(0,0,0,0.14);

      padding: clamp(24px, 4vw, 52px);
    }

    /* =====================================================
       SURVIVAL KIT MAIN CONTAINER
    ====================================================== */

    .survival-kit {
      width: 100%;
      max-width: 900px;

      margin: 0 auto;
      padding: 2rem 1.25rem;

      box-sizing: border-box;
    }

    .survival-kit h1 {
	  font-family: 'Protest Revolution', cursive;
	  font-size: clamp(3rem, 6vw, 5rem);
      margin: 0 0 1rem;
      line-height: 1.2;
    }
    .survival-kit h2 {
	  font-family: 'Protest Revolution', cursive;
      margin: 0 0 1rem;
      line-height: 1.2;
    }

    .survival-kit-intro {
	  font-family: 'Protest Revolution', cursive;
      margin: 0 0 1rem;
      line-height: 1.6;
    }

    /* =====================================================
       STANDARD NUMBERED LISTS
    ====================================================== */

    .survival-list {

      margin: 1.5rem 0 0;
      padding-left: 2rem;
    }

    .survival-list li {
      margin-bottom: 1.5rem;

      padding-left: 0.4rem;

      line-height: 1.6;
    }

    .survival-list li::marker {
      font-weight: bold;
    }

    .survival-list strong {
      display: block;

      margin-bottom: 0.25rem;

      font-size: 1.05rem;
      line-height: 1.4;
    }

.survival-list li strong {
    font-family: 'Protest Revolution', cursive;
    font-size: 2rem;
    font-weight: 400;
    line-height: 1.1;
    margin-bottom: 0.4rem;
}

    .survival-list p {
      margin: 0;
      line-height: 1.6;
    }

    /* =====================================================
       FEATURE ROWS

       These pair a specific Survival Kit item with its
       related illustration.

       Image 1: RIGHT
       Image 2: LEFT
       Image 3: RIGHT
    ====================================================== */

/* =====================================================
   SURVIVAL KIT FEATURE ROWS

   Each row contains four list items and one image.
===================================================== */

.survival-feature {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(280px, 46%);

  gap: clamp(28px, 4vw, 48px);

  align-items: center;

  margin: 2.75rem 0 3.5rem;
}

/* =====================================================
   FEATURE LIST SPACING
===================================================== */

.survival-feature .survival-list {
  margin: 0;
}

.survival-feature .survival-list li {
  margin-bottom: 1.35rem;
}

.survival-feature .survival-list li:last-child {
  margin-bottom: 0;
}

/* =====================================================
   FINAL FULL-WIDTH LIST BLOCK
===================================================== */

.survival-final-block {
  margin-top: 2.5rem;
}

.survival-final-block .survival-list {
  margin-top: 0;
}

    /* -----------------------------------------------------
       Remove unnecessary outer margins from lists when
       they are inside a feature row.
    ------------------------------------------------------ */

    .survival-feature .survival-list {
      margin: 0;
    }

    .survival-feature .survival-list li {
      margin-bottom: 0;
    }

    /* =====================================================
       IMAGE ON RIGHT

       Default structure:

       TEXT | IMAGE
    ====================================================== */

    .survival-feature.image-right .feature-text {
      grid-column: 1;
    }

    .survival-feature.image-right .survival-image {
      grid-column: 2;
    }

    /* =====================================================
       IMAGE ON LEFT

       Reverses the two columns:

       IMAGE | TEXT
    ====================================================== */

    .survival-feature.image-left .survival-image {
      grid-column: 1;
      grid-row: 1;
    }

    .survival-feature.image-left .feature-text {
      grid-column: 2;
      grid-row: 1;
    }

    /* =====================================================
       SURVIVAL KIT IMAGES
    ====================================================== */

    .survival-image {
      width: 100%;

      margin: 0;
      padding: 0;

      text-align: center;
    }

    .survival-image img {
      display: block;

      width: 100%;
      height: auto;

      margin: 0 auto;

      border: 3px solid rgba(0,0,0,0.65);
      border-radius: 8px;

      box-shadow:
        0 10px 24px rgba(0,0,0,0.25);
    }

    /* =====================================================
       SLIGHT HANDMADE IMAGE TILT
    ====================================================== */

    .image-right .survival-image {
      transform: rotate(0.6deg);
    }

    .image-left .survival-image {
      transform: rotate(-0.6deg);
    }

    /* =====================================================
       IMAGE CAPTIONS
    ====================================================== */

    .survival-image figcaption {
      margin-top: 0.75rem;

      font-family:
        'Protest Revolution',
        sans-serif;

      font-size: 1.15rem;
      line-height: 1.3;

      color: #111;
    }

    /* =====================================================
       OPTIONAL FEATURE TEXT EMPHASIS
    ====================================================== */

    .feature-text {
      min-width: 0;
    }

    /* =====================================================
       TABLET

       Let the image use slightly less horizontal space
       when the content area becomes narrower.
    ====================================================== */

    @media (max-width: 850px) {

      .survival-feature {
        grid-template-columns:
          minmax(0, 1fr)
          minmax(220px, 38%);

        gap: 24px;
      }

    }

    /* =====================================================
       MOBILE

       Stack the image and text for readability.

       The logical HTML order is preserved rather than
       forcing left/right positioning on small screens.
    ====================================================== */

    @media (max-width: 650px) {

      .survival-kit {
        padding: 1.5rem 1rem;
      }

      .survival-list {
        padding-left: 1.5rem;
      }

      .survival-list li {
        padding-left: 0.2rem;
        margin-bottom: 1.25rem;
      }

      .survival-list strong {
        font-size: 1rem;
      }

      .survival-feature {
        display: flex;
        flex-direction: column;

        gap: 1.25rem;

        margin: 1.75rem 0 2.25rem;
      }

      /*
         On mobile, text appears before image regardless
         of desktop left/right position.
      */

      .survival-feature .feature-text {
        order: 1;
        width: 100%;
      }

      .survival-feature .survival-image {
        order: 2;

        width: min(100%, 430px);

        margin-left: auto;
        margin-right: auto;

        transform: none;
      }

    }