* {
margin: 0;
padding: 0;
}

body {
background-color: #eff1f2;
font-family: sans-serif;
}

.content {
grid-area: content;
}
.sidebar {
grid-area: sidebar;
background: linear-gradient(
to right,
rgba(200, 107, 142, 1),
rgba(218, 105, 250, 1),
rgba(110, 125, 253, 1)
);
justify-content: center;
}
.footer {
grid-area: footer;
background: white;
}
.container {
font-size: 1.5em;
width: 100%;
height: 100;
height: 100vh;
display: grid;
grid-template-areas: "sidebar" "content" "footer";
grid-template-columns: 1fr;
grid-template-rows: 130px 800px 250px;
}

.content,
.sidebar,
.footer {
padding: 1em;
}

nav ul {
margin: 0;
padding: 0;
display: flex;
justify-content: space-between;
text-align: center;
}

nav li {
list-style: none;
padding: 1em 0;
}

nav li a {
color: white;
font-weight: 700;
opacity: 0.6;
text-decoration: none;
transition: 0.3s;
}

nav li a:hover {
opacity: 1;
}
.hero {
max-width: 90 px;
margin: 0 auto;
text-align: center;
}

.hero img {
width: 200px;
}

.hero h1 {
font-size: 2em;
font-weight: 300;
color: #373046;
}

.hero p {
font-weight: 300;
line-height: 1.3em;
color: #98abad;
}

.action-btn {
display: inline-block;
text-decoration: none;
color: white;
font-weight: 700;
background: #567bfb;
padding: 0.5em 2em;
border-radius: 60px;
margin: 1em 0;
transition: 0.3s;
}

@media (min-width: 1040px) {
.container {
grid-template-areas: "sidebar content" "sidebar footer";
grid-template-rows: 1fr auto;
grid-template-columns: 300px 1f;
}

nav ul {
display: flex;
justify-content: space-between;
flex-direction: column;
}
.sidebar {
background: linear-gradient(
rgba(200, 107, 142, 1),
rgba(218, 105, 250, 1),
rgba(110, 125, 253, 1)
);
padding-top: 10em;
}
.hero {
text-align: left;
margin: 7em 0;
}
.hero img {
width: 200px;
float: right;
}
.hero h1 {
font-size: 3em;
}
.hero p {
width: 60%;
}