/* CSS files add styling rules to your content */

body {
  font-family: 'Open Sans', sans-serif;
  margin: 8em;
  background-image: url('https://cdn.glitch.com/f65da69b-05fd-45d3-b4cf-146259e13ad1%2Fannie-spratt-xTaOPMa6wAE-unsplash.jpg?v=1563958313127');
  background-size: cover;
  background-position: center;
}

.content {
  background-color: #FFF7F3;
  display: grid;
  grid-template-columns: 65% 35%;
}

.text-content {
  padding: 3em;
}

h1 {
  font-family: 'Lora', serif;
  font-size: 2.5em;
}

.text-content p {
  width: 60%;
  margin-bottom: 2em;
  font-size: 1.1em;
}

button {
  background-color: black;
  border: black;
  padding: 15px 25px;
  color: #FFF7F3;
  cursor: pointer;
}

.grid {
  grid-column: 1/2;
  grid-row: 2/3;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 1.5em;
  margin-top: 1.5em;
  grid-gap: 5px;
}

.grid-img-1 {
  background-image: url('https://cdn.glitch.com/f65da69b-05fd-45d3-b4cf-146259e13ad1%2Fsean-kong-mvrtHvrqP6Y-unsplash.jpg?v=1563957021506');
  background-size: cover;
  background-position: center;
  height: 200px;
  width: 150px;
  border: 1px solid black;
  justify-self: end;
}

.grid-img-2 {
  background-image: url('https://cdn.glitch.com/f65da69b-05fd-45d3-b4cf-146259e13ad1%2Figor-rand-28v37-nDU78-unsplash.jpg?v=1563957055498');
  background-size: cover;
  background-position: center;
  height: 200px;
  width: 150px;
  border: 1px solid black;
}

.grid-img-3 {
  background-image: url('https://cdn.glitch.com/f65da69b-05fd-45d3-b4cf-146259e13ad1%2Fglodi-miessi-qtX-k38VsF8-unsplash.jpg?v=1563958761278');
  background-size: cover;
  background-position: center;
  height: 200px;
  width: 300px;
  border: 1px solid black;
  justify-self: end;
}

.grid-img-4 {
  background-image: url('https://cdn.glitch.com/f65da69b-05fd-45d3-b4cf-146259e13ad1%2Fmotoki-tonn-EyJK710s1EY-unsplash.jpg?v=1563958759157');
  background-size: cover;
  background-position: center;
  height: 200px;
  width: 150px;
  border: 1px solid black;
}

aside {
  background-color: #FFE7E6;
  grid-column: 2/3;
  grid-row: 1/3;
}

.profil {
  position: absolute;
  top: 25%;
  right: 20%;
}

.image {
  background-image: url('https://cdn.glitch.com/f65da69b-05fd-45d3-b4cf-146259e13ad1%2Ficons8-team-6LZuSzSwso0-unsplash.jpg?v=1563952624031');
  background-size: cover;
  background-position: center;
  border: 8px solid black;
  height: 600px;
  width: 450px;
}

.image2 {
  background-image: url('https://cdn.glitch.com/f65da69b-05fd-45d3-b4cf-146259e13ad1%2Ficons8-team-URoyGsQdLwg-unsplash.jpg?v=1563956996334');
  background-size: cover;
  background-position: center;
  border: 8px solid black;
  height: 600px;
  width: 450px;
}

.profil p {
  font-size: 0.9em;
}


/* IPAD PRO */

@media only screen and (min-device-width : 1024px) and (max-device-width : 1366px) and (orientation : portrait) {

  .profil {
    top: 15%;
    right: 20%;
  }

  .image, .image2 {
    height: 400px;
    width: 250px;
  }
  
  .grid {
  margin-top: 3em;
  margin-bottom: 5em;
}
  
  .grid-img-1, .grid-img-2, .grid-img-4 {
  height: 150px;
  width: 100px;
}
  
  .grid-img-3 {
  height: 150px;
  width: 200px;
  }
  
}

@media only screen and (min-device-width : 1024px) and (max-device-width : 1366px) and (orientation : landscape) {
  
    .profil {
    top: 20%;
    right: 12%;
  }

  .image, .image2 {
    height: 600px;
    width: 450px;
  }
}

/* IPAD */

@media only screen and (min-device-width : 768px) and (max-device-width : 1023px) and (orientation : portrait) {

  body {
    margin: 0;
    background-image: none;
  }
  
  .profil {
    top: 5%;
    right: 5%;
  }
  
  .image, .image2 {
    height: 400px;
    width: 250px;
  }
  
   .grid-img-1, .grid-img-2, .grid-img-4 {
  height: 150px;
  width: 100px;
}
  
  .grid-img-3 {
  height: 150px;
  width: 200px;
  }
  
  .grid {
    margin-bottom: 7.5em;
  }
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
  
  body {
    margin: 0;
    background-image: none;
  }
  
  .profil {
    top: 5%;
    right: 5%;
  }
  
  .image, .image2 {
    height: 400px;
    width: 250px;
  }
  
   .grid-img-1, .grid-img-2, .grid-img-4 {
  height: 150px;
  width: 100px;
}
  
  .grid-img-3 {
  height: 150px;
  width: 200px;
  }
  
}

/* SMARTPHONES */
@media only screen and (min-device-width : 320px) and (max-device-width : 600px) {

  body {
    margin: 1em;
  }
  
  .content {
    border-right: 30px solid #FFE7E6;
  }
  
  .text-content {
    grid-column: 1/3;
    grid-row: 1/2;
    z-index: 2;
  }
  
  .text-content p {
    width: 90%;
    margin-bottom: 2em;
    font-size: 1.1em;
}
  
  aside {
    display: none;
  }
  
  .profil {
    display: none;
  }
  
  .grid {
    grid-column: 1/3;
    grid-row: 2/3;
    z-index: 1;
    grid-template-columns: 1fr 1fr;
  }
  
  .grid-img-1 {
    grid-column: 2/3;
    grid-row: 1/2;
    justify-self: start;
  }
  
  .grid-img-2 {
    grid-column: 1/2;
    grid-row: 3/4;
    justify-self: end;
  }
  
  .grid-img-3 {
    grid-column: 1/3;
    grid-row: 2/3;
   
  }
  
  .grid-img-4 {
    grid-column: 2/3;
    grid-row: 3/4;
  }
}