.additional-container{

display: flex;
align-items: baseline;
flex-direction: row;
flex-wrap: wrap;
margin-bottom: 2rem;
width: $size-additional-container-width;

@media screen and (max-width: 479px) {
  align-content: center;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  width: 100%;
}

}

.post {

&__title {
  margin-bottom: 1rem;
  width: 100%;
  font-size: 2.125rem;
  @media screen and (max-width: 479px) {
    font-size: 1.75rem;
    line-height: 2.125rem;
  }
}

&__date {
  margin-bottom: 0 !important;
  width: 15%;
  color: $color-font-sub;
  font-size: 1rem;
  @media screen and (max-width: 479px) {
    margin-bottom: .75rem !important;
    width: 100%;
    font-size: 0.875rem;
  }
}

}

.post-container {

box-sizing: border-box;
padding: 2rem 0 0;
width: 50rem;

@media screen and (max-width: 479px) {
  margin-left: 0;
  padding: 0;
  width: 90%;
}

}

.post-header {

display: flex;
flex-wrap: wrap;
width: 100%;

}

.post-meta {

display: flex;
align-items: center;
flex-direction: row;
flex-wrap: wrap;
margin-bottom: 2rem;
width: 100%;
height: 1.5rem;
@media screen and (max-width: 479px) {
margin-bottom: 1rem;
height: auto;
}

}

.post-tags {

display: flex;
align-items: center;
flex-direction: row;
flex-wrap: wrap;
justify-content: right;
width: 85%;
height: 100%;
@media screen and (max-width: 479px) {
  width: 100%;
  height: auto;
}

}

.post-tag {

display: flex;
align-items: center;
justify-content: center;
margin-right: 0.375rem;
margin-bottom: 0.375rem;
height: 100%;
border: 1px solid $color-border;
border-radius: 0.75rem;

@media screen and (max-width: 479px) {
  height: 1.5rem;
}

&__icon {
  margin-right: 0.25rem;
}

&__link {
  display: flex;
  align-items: center;
  flex-direction: row;
  margin-right: 0.25rem;
  padding: 0.25rem 0.5rem;
  height: 100%;
  color: $color-font-sub;
  text-decoration: none;
  font-size: 0.75rem;
}

}

.page-content, .post-content, .posts-content, .profile-content {

flex-direction: column;
padding: 0 0 5rem;
color: $color-font-sub;
line-height: 1.875rem;

@include container();

@media screen and (max-width: 479px) {
  padding: 0 0 0rem;
  width: 100%;
  height: auto;
  line-height: 1.5rem;
}

h1 {
  font-size: 1.75rem;
  @media screen and (max-width: 479px) {
    font-size: 1.625rem;
    line-height: 1.75rem;
  }
}

h2 {
  font-size: 1.675rem;
  @media screen and (max-width: 479px) {
    font-size: 1.5rem;
    line-height: 1.75rem;
  }
}

h3 {
  font-size: 1.5rem;
  @media screen and (max-width: 479px) {
    font-size: 1.375rem;
    line-height: 1.675rem;
  }
}

h4 {
  font-size: 1.375rem;
  @media screen and (max-width: 479px) {
    font-size: 1.25rem;
    line-height: 1.5rem;
  }
}

h5 {
  font-size: 1.25rem;
  @media screen and (max-width: 479px) {
    font-size: 1.125rem;
    line-height: 1.375rem;
  }
}

h6 {
  font-size: 1.125rem;
  @media screen and (max-width: 479px) {
    font-size: 1rem;
    line-height: 1.5rem;
  }
}

h1 {
  margin-bottom: 0.25rem;
}

h2,
h3,
h4,
h5,
h6 {
  margin-bottom: 0.5rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: $color-font-main;
}

>ul,
>ol,
img,
p,
table,
blockquote {
  margin-bottom: 1.5rem;
}

ul,
ol {
  padding-left: 1rem;
}

img {
  max-width: 100%;
}

pre {
  padding: 0.5rem;
  line-height: 1.375rem;
}

a {
  color: $color-font-sub;

  &:hover {
    opacity: 0.6;
  }
}

table {
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
}

table th,
table td {
  padding: 10px 0;
  text-align: center;
}

table tbody tr:nth-child(odd) {
  background-color: #eee;
}

blockquote {
  padding: 0.25rem 0 0.25rem 0.5rem;
  border-left: 0.25rem solid $color-border;

  >p {
    margin-bottom: 0;
  }
}

.highlighter-rouge {
  margin-bottom: 1rem;
  border: 1px solid $color-border;
  border-radius: 0.25rem;
  background-color: rgba($color-border, 0.25);
}

}

.post-content {

width: $size-post-container-width !important;

@media screen and (max-width: 479px) {
  width: 100% !important;
}

}

.posts-content {

padding-bottom: 2rem !important;
width: $size-post-container-width !important;
@media screen and (max-width: 479px) {
  padding-bottom: 0.5rem !important;
  width: 100% !important;
}

}