a{
  text-decoration: none;
  color: white;
}

.main-wrapper{
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 125px repeat(6, minmax(50px, auto));
  /* margin: 1% auto; */
  /* width: 90%; */

}

hr{
  display: none;
}

header{
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.socials{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  width: 30%;
  position: relative;
  right: -30%;
  grid-gap: 10%;
  top: 5%;
}

.fa-facebook-f:before {
grid-column: 1/1;
font-size: 2rem;
color: white;
position: static;
/* top: 3rem; */
/* right: 150%; */
border: 1px solid;
border-radius: 5%;
padding: .1rem;
}

.fa-instagram:before{
  grid-column: 2/2;
  font-size: 2rem;
    color: white;
    position: static;
    /* top: 3rem; */
    /* right: 85%; */
    border: 1px solid;
    border-radius: 5%;
    padding: .1rem;
}

.fa-youtube:before{
  grid-column: 3/3;
  font-size: 2rem;
  color: white;
  position: static;
  /* top: 1rem; */
  /* right: 250%; */
  border: 1px solid;
  border-radius: 5%;
  padding: .1rem;
}


.navigation {
  align-items: center;
  grid-column: 2/2;
}
.navigation ul {
  display: block;
  list-style: none;
  /* margin: .5rem; */
  padding: .3rem;
  color: white;
  /* margin-left: 14rem; */
  /* margin-right: 1rem; */
  /* margin-top: 1rem; */
  font-family: 'Chelsea Market', cursive;
  text-align: right;
}
.navigation ul li {
  border: solid 1px;
  padding: 1.3rem;
}

.navigation ul li:hover {
  color: black;
  background-color: #d3d3d3;
  text-decoration: none;
}
.logo img{
  position: relative;
  bottom: 170%;
  right: 1rem;
  /* width: 20%; */
  grid-column: 1/1;
}


.hero-image{
  background: url("../photos/Malta-Hero.png") no-repeat;
  grid-row: 1/3;
  /* width: auto; */
  height: 20rem;
}

.articles{
  display: grid;
  grid-template-rows: repeat(8, minmax(75px, auto));
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-row: 3/7;
  /* border: 1px solid; */
  width: auto;
  font-family: 'Chelsea Market', cursive;
  text-align: center;
  background-color: #edf5fb;
}

.description{
  grid-row: 2/4;
  grid-column: 1/8;
}

#slider{
  margin-top: 3rem;
  grid-column: 2/7;
  border: 1px solid;
  border-radius: 5%;
}

.description2{
  grid-row: 6/8;
  grid-column: 1/8;
}

.articles img{
  height: 90%;
  position: relative;
  grid-column: 4/5;
  left: 1rem;
  display: none;
}

.articles h2{
  position: relative;
  text-align: center;
  grid-column: 4/5;
  grid-row: 1/1;
}

.footer{
  grid-row: 7/8;
  /* border: 1px dashed; */
  text-align: center;
  font-size: .5rem;
  position: relative;
  top: 50%;
}

@media only screen and (min-width: 900px) {

  .main-wrapper{
    display: grid;
    grid-template-columns: repeat(12, minmax(100px, auto));
    grid-template-rows:  repeat(10, minmax(150px, auto));
    margin: 1% auto;
    width: 90%;
  }


  header{
    grid-template-columns: 1fr 1fr 1fr;
    grid-column: 1/12;
    grid-row: 1/3;
  }


  .socials{
    width: 10%;
    position: relative;
    left: 75%;
    top: 60%;
    z-index: 1;
  }

  .navigation {
    grid-column: 2/4;
    align-items: center;
    position: relative;
    margin-left: 20%;
    /* right: 30%; */
  }

  .navigation ul li {
    /* grid-column: 3/4; */
    border:  0px;
    padding: 1rem;
    /* margin-left: 1%; */
    margin-top: 2rem;
    /* margin-bottom: 20%; */
    /* margin-right: 1rem; */
    position: relative;
    /* left: 5%; */

  }

  hr{
    position: relative;
    top: 65%;
    right: 5%;
    /* width: 50rem; */
    display: flex;
  }

  .navigation ul {
    display: flex;
    list-style: none;
    margin-top: 0px;
  }

  .navigation img{
    display: flex;
    position: relative;
    top: 2rem;
    right: 100%;
    width: 200%;
    height: auto;
  }

  .navigation ul li:hover {
    color: black;
    background-color: #d3d3d3;
    text-decoration: none;
  }

  .logo img{
    position: relative;
    top: -100%;
    left: 5%;
    width: 35%;
    /* right: 4rem; */
    /* width: 20%; */
    /* grid-column: 1/1; */
  }

  .hero-image{
    background: url("../photos/malta-big.jpg") no-repeat;

    background-size: cover;
    /* background-position: center; */
    grid-column: 1/13;
    grid-row: 1/5;
    width: auto;
    height: 100%;
  }



  .articles{
    grid-row: 5/11;
    grid-column: 1/13;
    grid-template-rows: repeat(6, minmax(75px, auto));
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .description, .description2{
    grid-column: 2/6;
  }

  .articles h2{
    grid-column: 2/6;
  }

  #slider{
    grid-column: 2/6;
  }

  .footer{
    grid-row: 11/12;
    grid-column: 6/8;
  }