/* BODY */
  body {
  background-color: black;
  }
/* MOBILE SCREEN */
    .wrapper {
    transition:all 1.4s;
    height: 3000px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 95% 1fr;
    background-color: black;
    color: white;
    max-width: 1240px;
    min-width: 320px;
    }
    .wrapper-gallery {
      transition:all 1s;
      height: 700px;
      grid-template-rows: 3fr 1fr 0fr 1fr;
    }

/* ICON / LOGO */
    .icon {
      background-color: black;
      grid-column: 1/5;
      grid-row: 1/2;
      display: flex;
      align-content: center;
      justify-content: center;
      padding: 5px;
    }
    .selection {
      background-color: black;
      grid-column: 2/4;
      grid-row: 2/3;
      display: flex;
      align-content: center;
      justify-content: center;
      position: relative;
      padding: 5px;
    }
/* GALLERY */
    .gallery {
      display: grid;
      grid-column: 1/5;
      grid-row: 3/4;
      background-color: black;
      grid-template-columns: 1fr;
      grid-template-rows: repeat(12, 1fr);
    }
    .card {
      border: 1px solid black;
      display: flex;
      background-color:pink;
      max-width: 100%;
    }
    .card p {
      max-width: 100%;
    }
    .card:nth-child(2){

      background-size: cover;
    }
    .card:nth-child(3){
      background-image:url("../../images/Ski.jpg");
      background-size: cover;
    }
    .card:nth-child(4){
      background-image:url("../../images/Tika1.jpg");
      background-size: cover;
    }
/* COPYRIGHT  */
    .copyright {
      background-color: black;
      grid-column: 1/5;
      grid-row: 4/5;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
    }
/* MEDIUM SCREEN  */
  @media (min-width: 600px) {
    .wrapper {
      transition:all 1.4s;
      height: 1000px;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: 10% 80% 10%;
      background-color: black;
      color: white;
      max-width: 1240px;
      min-width: 320px;
      }
    .wrapper-gallery {
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr 0fr 1fr;
        height: 700px;
    }
    .gallery {
        grid-column: 1/4;
        grid-row: 2/3;
        background-color: black;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: repeat(4, 1fr);
    }
    .card {
      max-width: 360px;
    }


    /*  */
    .icon {
      grid-column: 1/2;
      grid-row: 1/2;
      display: flex;
      background-color: black;
      justify-content: flex-end;
    }
    .selection {
      grid-column: 2/3;
      grid-row: 1/2;
      justify-content: left;
      align-items: center;
      display: flex;
    }
    .copyright {
      grid-column: 1/5;
      grid-row: 3/4;
      justify-content: center;
      align-items: center;
      position: relative;
    }
  }
/* FULL SCREEM */
  @media (min-width: 1240px) {
/* FULL SCREEN GRID */
    .wrapper {
        transition:all 1.4s;
        height: 1000px;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 10% 80% 10%;
        background-color: black;
        color: white;
        max-width: 1240px;
        min-width: 320px;
        }
      .wrapper-gallery {
          grid-template-columns: 1fr 1fr 1fr;
          grid-template-rows: 1fr 0fr 1fr;
          height: 700px;
      }
      .gallery {
          grid-column: 1/4;
          grid-row: 2/3;
          background-color: black;
          display: grid;
          grid-template-columns: 1fr 1fr 1fr 1fr;
          grid-template-rows: repeat(4, 1fr);
      }
  /* FULL SCREEN ELEMENTS  */
      .icon {
      grid-column: 1/2;
      grid-row: 1/2;
      display: flex;
      justify-content: center;
     }
      .selection {
      grid-column: 2/3;
      grid-row: 1/2;
      justify-content: left;
      align-items: center;
      display: flex;
    }
    .copyright {
      grid-column: 1/5;
      grid-row: 3/4;
      justify-content: left;
      align-items: center;
      position: relative;
      padding: 0  0 0 40px;
     }
     .card {
       max-width: 310px;
     }
   }