*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  font-family:'Montserrat', sans-serif;
  font-weight:200;
  font-size:1.2em;

  margin-bottom:500px;
}

/* ===== HEADER ===== */

.header{
  display:grid;
  grid-template-columns:1fr 2fr;
  border:1px solid black;

  position:fixed;
  top:0;
  width:100%;
  background:white;
}

.logo{
  padding:30px;
  border-right:1px solid black;

  display:flex;
  justify-content:center;
  align-items:center;
}

.nav{
  display:grid;
  grid-template-columns:1fr 1fr;
}

.menu,
.suggest{
  padding:30px;
  border-right:1px solid black;

  display:flex;
  align-items:center;
}

.nav div:last-child{
  border-right:none;
}

/* ===== HERO ===== */

.hero{
  height:350px;
  display:flex;
  justify-content:flex-start;
  align-items:center;
  padding-left:550px;

  border-left:1px solid black;
  border-right:1px solid black;
  border-bottom:1px solid black;
}

.hero h1{
  font-size:18px;
  font-weight:200;
  letter-spacing:1px;
}

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

.content{
  display:grid;
  grid-template-columns:1fr 2fr;
  border-left:1px solid black;
  border-right:1px solid black;
}

.left{
  border-right:1px solid black;
}

.text{
  padding:40px;
  border-bottom:1px solid black;
}

.text ul{
  margin-left:30px;
  list-style:square;
}

/* ===== NOTICE ===== */

.notice{
  display:grid;
  grid-template-columns:1fr 2fr;
  border-left:1px solid black;
  border-right:1px solid black;
}

.notice-text{
  padding:30px 0px 30px 40px;
  display:flex;
  align-items:center;
  border-bottom:1px solid black;
}

/* ===== FEATURES COST ===== */

.features-cost{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  border-left:1px solid black;
  border-right:1px solid black;
}

.features{
  padding:20px 20px 20px 60px;
  border-right:1px solid black;
  border-bottom:1px solid black;
}

.features ul{
  margin-left:40px;
  margin-top:20px;
  margin-bottom:10px;
  list-style:square;
}

.cost{
  padding:20px;
  border-bottom:1px solid black;
}

.cost p:last-child{
  margin-top: 2.4rem;
  text-align: center;
}

/* ===== EMAIL ===== */

.email{
  display:grid;
  grid-template-columns:1fr 2fr;
  border-bottom:1px solid black;
  border-left:1px solid black;
  border-right:1px solid black;
}

.email-text{
  padding:30px;
  display:flex;
  justify-content:center;
  align-items:center;
}

.email-text a{
  text-decoration:none;
  color:black;
}

/* ===== HOVER EFFECT ===== */

.logo:hover,
.menu:hover,
.suggest:hover,
.email-text:hover{
  background:black;
  color:white;
  cursor:pointer;
}

.email-text:hover a{
  color:white;
}

/* ===== RESPONSIVE ===== */

@media (max-width:768px){

.header{
  grid-template-columns:1fr;
  position:static;
}

.logo{
  border-right:none;
  border-bottom:1px solid black;
  padding:18px;
}

.nav{
  grid-template-columns:1fr 1fr;
}

.menu,
.suggest{
  justify-content:flex-start;
  padding:20px;
  display: flex;
  align-items: center;
}

.menu{
  border-right:1px solid black;
}

.suggest{
  border-right:none;
}

.left{
  display:none;
}

.hero{
  height:250px;
  padding-left:20px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
}

.content,
.notice,
.email{
  grid-template-columns:1fr;
}

.features-cost{
  grid-template-columns:1fr;
}

.text{
  padding:20px 50px;
}

.features{
  padding:45px 30px;
}

.cost{
  padding:25px 30px;
}

.email-text{
  padding:40px 30px;
}

}