/* --------------------------------------
  Mobile Styling
-------------------------------------- */

h1, h2 {
  font-size: 2rem;
}

h1 {
  margin-bottom: 25px;
}

h2 {
  margin-bottom: 40px;
}

h2 > i {
  margin-right: 10px;
}

h3 {
  margin-bottom: 20px;
  font-size: 1.5rem;
}

/* --------------------------------------
  Reusable Classes
-------------------------------------- */

.container {
  padding: 0 20px;
}

/* --------------------------------------
  Header
-------------------------------------- */

.header {
  padding: 15px 20px;
}

.header-logo-img {
  width: 40px;
}

.header-logo-title {
  display: none;
}

.header-nav-menu-item {
  margin-left: 20px;
}

/* --------------------------------------
  Main - Hero
-------------------------------------- */

.main-home {
  padding: 100px 0 80px;
}

.main-home-highlight-links p {
  margin-bottom: 20px;
}

.main-home-highlight-links p > br {
  display: none;
}

.main-home-img {
  display: none;
}

/* --------------------------------------
  Main - Works
-------------------------------------- */

.main-art_for_all {
  padding: 80px 0;
}

.main-art_for_all-item {
  margin-bottom: 50px;
}

.main-art_for_all-item-img {
  margin-bottom: 40px;
}

.main-art_for_all-item-text p:last-of-type {
  margin-bottom: 30px;
}

/* --------------------------------------
  Main - About
-------------------------------------- */

.main-explanation {
  padding: 80px 0 60px;
}

.main-explanation-img {
  text-align: center;
}

.main-explanation-img .mobile {
  max-width: 200px;
  margin-bottom: 40px;
  border-radius: 50%;
}

.main-explanation-img .tablet-and-up {
  display: none;
}

.main-explanation-description,
.main-explanation-addition-skills {
  margin-bottom: 30px;
}

.main-explanation-addition-skills ul,
.main-explanation-addition-skills li {
  margin-bottom: 10px;
}

/* --------------------------------------
  Footer
-------------------------------------- */

.footer {
  padding: 60px 0 10px;
}

.footer-form {
  margin-bottom: 80px;
}

.footer-form-input {
  margin-bottom: 10px;
}

.footer-form-textarea {
  margin-bottom: 20px;
}

.footer-info {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.footer-info-nav,
.footer-info-follow {
  margin-bottom: 40px;
}

.footer-info-nav {
  display: flex;
  align-items: baseline;
}

.footer-info-nav-menu ul {
  display: flex;
}

.footer-info-nav-menu li {
  margin-left: 20px;
}

.footer-info-nav-img {
  width: 60px;
}

/* --------------------------------------
  Page - Work
-------------------------------------- */

.main-article {
  padding: 80px 0;
}