<ul class="jigsaw">
     <li>
            <figure>
        <img src="https://picsum.photos/250/150/?image=1002">
        <figcaption>
          <a>1. beliefs</a>
        </figcaption>
    </li>
    <li>
      </figure>
      <figure>
        <img src="https://picsum.photos/250/150/?image=995">
        <figcaption>
          <a>2. fauna</a>
        </figcaption>
      </figure>
</li>
    <li>
      <figure>
        <img src="https://picsum.photos/250/150/?image=981">
        <figcaption>
          <a>3. flora</a>
        </figcaption>
      </figure>
      </li>
    <li>
      <figure>
        <img src="https://picsum.photos/250/150/?image=1064">
        <figcaption>4. tours</figcaption>
      </figure>
      </li>
    <li>
      <figure>
        <img src="https://picsum.photos/250/150/?image=1057">
        <figcaption>
          <a>5. language</a>
        </figcaption>
      </figure>
      </li>
    <li>
      <figure>
        <img src="https://picsum.photos/250/150/?image=1052">
        <figcaption>
          <a>6. people</a>
        </figcaption>
      </figure>
      </li>
    <li>
      <figure>
        <img src="https://picsum.photos/250/150/?image=1050">
        <figcaption>
          <a>7. art</a>
        </figcaption>
      </figure>
      </li>
    <li>
      <figure>
        <img src="https://picsum.photos/250/150/?image=1043">
        <figcaption>
          <a>8. heros</a>
        </figcaption>
      </figure>
      </li>
    <li>
      <figure>
        <img src="https://picsum.photos/250/150/?image=1038">
        <figcaption>
          <a>9. cultural awareness training</a>
        </figcaption>
      </figure>
      </li>
    <li>
      <figure>
        <img src="https://picsum.photos/250/150/?image=1035">
        <figcaption>
          <a>10. members</a>
        </figcaption>
      </figure>
      </li>
    <li>
      <figure>
        <img src="https://picsum.photos/250/150/?image=1037">
        <figcaption>
          <a>11. Ngurra</a>
        </figcaption>
      </figure>
      </li>
    <li>
      <figure>
        <img src="https://picsum.photos/250/150/?image=1016">
        <figcaption>
          <a>12. shop</a>
        </figcaption>
      </figure>
      </li>
    <li>
      <figure>
        <img src="https://picsum.photos/250/150/?image=998">
        <figcaption>
          <a>13. sites</a>
        </figcaption>
      </figure>
</li>
    </ul>
    <div class="introText">
      <article class="welcomeToCountry">
      <p>Ngurra gangangarrinha yingu buluyugayi birbiwarni wankgayi thurdud mirda nyantharri biyiyarri…
      </p>
      <p>Country, we come here today to visit you and talk straight… please don’t get angry and harm us…
      </p>
      <p>
        Coming to country, we speak to our ancestors, and they speak with us. Creating this website, we speak with you. We share
        our knowledge, experience and cultural heritage generously so that you will understand who we are and learn about
        our Yindjibarndi country, our people, our language and Laws.
      </p>
      <p>Wanthiwa!</p>
      </article>
    </div>
*,
*:before,
*:after {
  box-sizing: border-box;
}


body {
  display: grid;
  grid-template-columns: 3fr 2fr;
  justify-content: space-around;
  font-family: 'Gill Sans', Arial, sans-serif;
}

ul.jigsaw {
  display: grid;
  grid-gap: 0;
  grid-template-columns: repeat(37,25px);
  grid-template-rows: repeat(28,25px);
  margin: 0 auto;
  list-style: none;
}

ul.jigsaw  li figure {
  width: 15.63rem;
  height: 9.375rem;
  padding: 0;
  margin: 0;
  position: relative;
}

ul.jigsaw li figure>img {
  object-fit: cover;
border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

ul.jigsaw li figure>figcaption {
  background-color: white;
  opacity: 0.8;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 15.63rem;
  padding: 0.5rem;
  text-align: center;
}

ul.jigsaw li:nth-of-type(1) {
  grid-column: 6;
  grid-row: 1;
  align-self: start;
}

ul.jigsaw li:nth-of-type(2) {
  grid-column: 14;
  grid-row: 4;
  z-index: -1;
  align-self: start;
}

ul.jigsaw li:nth-of-type(3) {
  grid-column: 22;
  grid-row: 3;
  z-index: -3;
  align-self: start;
}

ul.jigsaw li:nth-of-type(4) {
  grid-column: 5;
  grid-row: 6;
  z-index: -2;
  align-self: start;
}

ul.jigsaw li:nth-of-type(5) {
  grid-column: 15;
  grid-row: 10;
  z-index: 1;
  align-self: start;
}

ul.jigsaw li:nth-of-type(6) {
  grid-column: 24;
  grid-row: 9;
  z-index: -4;
  align-self: start;
}

ul.jigsaw li:nth-of-type(7) {
  grid-column: 7;
  grid-row: 12;
  z-index: 3;
  align-self: start;
}

ul.jigsaw li:nth-of-type(8) {
  grid-column: 16;
  grid-row: 16;
  z-index: -1;
  align-self: start;
}

ul.jigsaw li:nth-of-type(9) {
  grid-column: 25;
  grid-row: 15;
  z-index: -2;
  align-self: start;
}

ul.jigsaw li:nth-of-type(10) {
  grid-column: 17;
  grid-row: 22;
  z-index: 2;
  align-self: start;
}

ul.jigsaw li:nth-of-type(11) {
  grid-column: 26;
  grid-row: 21;
  z-index: -1;
  align-self: start;
}

ul.jigsaw li:nth-of-type(12) {
  grid-column: 1;
  grid-row: 20;
  z-index: -3;
  align-self: start;
}

ul.jigsaw li:nth-of-type(13) {
  grid-column: 8;
  grid-row: 18;
  z-index: 1;
  align-self: start;
}
div.introText {
  grid-column: 2/3;
  align-self: center;
}

.introText .welcomeToCountry{
  width: 35rem;
  line-height: 1.25rem;
}
p:nth-of-type(1){
  font-size: 24px;
  line-height: 1.75rem;
}
p:nth-of-type(2), p:nth-of-type(4){
  font-size: 18px;
  font-style: italic;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.