/********  
RESETS
*********/
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  font-size: 62.5%;
}
:root {
  --primary-color: #1da1f2;
  --text-color: #14171a;
  --border: 0.3px solid rgb(223, 223, 223);
  --btn-hover: #1a90da;
  --padding: 2rem;
}
body,
input,
textarea,
button {
  font-family: "Montserrat", sans-serif;
}
body {
  margin-bottom: 8rem;
}
button,
input,
textarea {
  outline: none;
}
button {
  border: none;
  cursor: pointer;
}

.main {
  display: grid;
  grid-template-columns: 27rem 1fr 27rem;
}
@media (max-width: 1080px) {
  .main {
    grid-template-columns: 27rem 1fr;
  }
}

@media (max-width: 780px) {
  :root {
    --padding: 1.4rem;
  }
  .main {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 450px) {
  :root {
    --padding: 1.1rem;
  }
}

.section-header {
  padding: 1.5rem var(--padding);
  background-color: white;
  border-bottom: var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.section-header__heading {
  font-size: 2.1rem;
}
.section-header__logout {
  font-size: 1.5rem;
  font-weight: 500;
  background-color: transparent;
}
.section-header__logout:hover {
  text-decoration: underline;
}