.c-post {
	// padding-bottom: 30px;
	// padding-bottom: 120px;

	&__wrap {
		max-width: 800px;
		margin: 0 auto;
	}

	&__header {
		padding-top: 130px;
		background-color: #f9f9fa;

		&__bar {
			padding: 40px 0;
			border-top: solid 1px rgba(45, 79, 110, 0.1);

			> div {
				display: grid;
				grid-template-columns: 1fr 1fr;
				align-items: center;
			}
		}
	}

	&__title {
		margin-bottom: 46px;
		font-size: 48px;
		font-weight: 300;
		line-height: 1.33;
		color: $color-dark;
	}

	&__meta {
		@include meta;
	}

	&__social {
		margin-left: auto;

		ul {
			display: flex;

			li {
				.like-button--article {
					width: 100%;
					height: 100%;
					border-radius: 24px;
					padding: 1px 14px;
					font-size: 16px;
					display: flex;
					justify-content: center;
					align-items: center;
					color: $color-brand-blue;
					background: #e4e8eb;
					transition: 0.3s color, 0.3s background-color;
				}
			}
		}

		li + li {
			margin-left: 8px;
		}

		a {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 48px;
			height: 48px;
			border-radius: 24px;
			background-color: rgba($color-brand-blue, 0.1);
			font-size: 16px;
			color: $color-brand-blue;
			transition: 0.3s color, 0.3s background-color;
		}

		// .like-button {
		// 	span {
		// 		font-size: 12px;
		// 		margin-bottom: 2px;
		// 	}
		// }
	}

	&__body {
		@include post;
		padding-top: 65px;
		padding-bottom: 30px;

		h1 {
			font-size: 28px;
		}
		img {
			object-fit: contain;
		}

		.c-bannerPosts-left .banner-content img {
			margin: 0;
		}
	}

	&__video {
		max-width: 1000px;
		margin-left: auto;
		margin-right: auto;
	}

	&__video-embed {
		@include responsive-video;
	}

	&__footer {
		> div {
			display: grid;
			grid-template-columns: 1fr 2fr;
			border-top: solid 1px rgba(45, 79, 110, 0.1);
			padding-top: 25px;
		}
	}

	&__author {
		display: flex;

		&__cover {
			width: 48px;
			height: 48px;
			border-radius: 50%;
			margin-right: 8px;
		}

		&__info {
			margin-top: 20px;
		}

		&__title {
			font-size: 14px;
			font-weight: normal;
			color: $color-dark;
		}

		p {
			margin-top: 5px;
			font-size: 12px;
			font-weight: 500;
			color: rgba($color-dark, 0.4);
		}
	}

	&__tags {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-end;
	}

	&__tag {
		display: block;
		border-radius: 24px;
		margin-bottom: 8px;
		margin: 0 4px 8px 4px;
		padding: 8px 20px;
		background-color: rgba($color-brand-blue, 0.1);
		font-size: 13px;
		font-weight: 500;
		text-align: center;
		color: $color-brand-blue;
		transition: 0.3s color, 0.3s background-color;
		align-self: center;
	}

	@include media-breakpoint-up(lg) {
		&__social a,
		.like-button--article {
			&:hover {
				background-color: $color-brand-green;
				color: #fff;
			}
		}

        &__tag {
            &:hover {
                background-color: $color-brand-blue;
				color: #fff;
            }
        }

		&__social {
			&.is-fixed {
				position: fixed;
				top: 100px;
				right: 110px;
				z-index: 3;

				ul {
					flex-direction: column;
					align-items: center;
					justify-content: center;
				}

				li {
					margin-left: 0;
				}

				li:not(:last-child) {
					margin-bottom: 8px;
				}

				.like-button--article {
					padding: 10px 15px;
				}
			}

			&.is-hide {
				visibility: hidden;
				pointer-events: none;
			}
		}
	}

	@include media-breakpoint-down(sm) {
		&__header {
			&__bar {
				> div {
					grid-template-columns: 1fr;
					align-items: flex-start;
				}
			}
		}

		&__title {
			font-size: 40px;
			line-height: 1.4;
		}

		&__social {
			margin-top: 35px;
			margin-left: 0;
		}

		&__footer {
			> div {
				grid-template-columns: 1fr;
				row-gap: 40px;
			}
		}

		&__tags {
			margin-left: -4px;
			margin-right: -4px;
			justify-content: flex-start;
		}
	}
}
