.blog.page-content {
	.group.story-group.single-post-group {
		.row.story-row {
			padding-bottom: 0;
		}
	}

	.group.group-2.card-group {
		display: flex;
		justify-content: normal;

		padding-top: calculateRem(25);

		// Here be mobile styles
		@include breakpoint(mobile) {
			flex-flow: column nowrap;
		}

		// Here be tablet styles
		@include breakpoint(tablet) {
			flex-flow: row wrap;
		}

		// Here be desktop styles
		@include breakpoint(laptop) {

		}

		.row.card-row.post-excerpt {
			@include breakpoint(mobile) {
				width: 100%;
			}

			@include breakpoint(tablet) {
				width: 50%;
			}

			@include breakpoint(laptop) {
				width: 50%;
			}

			.subtitle.blog {
				margin-bottom: 0;
			}
		}

		padding-bottom: calculateRem(25);

		.row.card-row.post-excerpt {
			&:nth-child(-n+3),
			&:nth-child(5n+1),
			&:nth-child(5n+2),
			&:nth-child(5n+3) {
				@include breakpoint(mobile) {
					width: 100%;
				}

				@include breakpoint(tablet) {
					width: 50%;
				}

				@include breakpoint(laptop) {
					width: 33%;
				}
			}
		}

		.row.card-row.post-excerpt.extra-post {
			@include breakpoint(mobile) {
				width: 100%;
			}

			@include breakpoint(tablet) {
				width: 50%;
			}
		}

		.card > .image-container {
            overflow: hidden;
            display: flex;
            flex-flow: column nowrap;
            a > .image {
				width: 100%;
				transition: all 1s ease-out;
				&:hover {
					transform: scale(1.1);
				}
				&::after {
					content: "";
					padding-top: 66%;
					width: 100%;
					position: relative;
					display: block;
				}
            }
          }
          .card .card-content {
            padding-top: calculateRem(20);
            padding-right: calculateRem(25);
            padding-bottom: calculateRem(20);
            padding-left: calculateRem(25);

			height: auto;

			.category {
				.subtitle {
					a {
						font-size: 14px;
						font-weight: 700;
						text-transform: uppercase;
					}
				}
			}

			.content {
				a > h6 {
					margin-bottom: 0;
				}
			}

            .title-link {
              color: inherit;
            }
		  }
	}
	.pagination-links {
		width: 100%;

		padding-top: 0;
		padding-right: calculateRem(25);
		padding-bottom: calculateRem(100);
		padding-left: calculateRem(25);

		.page-numbers {
			display: inline-block;

			width: calculateRem(30);
			height: calculateRem(30);

			margin-right: calculateRem(4);
			margin-left: calculateRem(4);

			color: $black;
			text-align: center;
			line-height: calculateRem(30);

			&:not(.current):hover {
				color: $primary-color;
			}

			&.current {
				border-radius: 50%;

				background-color: $primary-color;
				color: setTextColor($primary-color);
			}

			i.primary-color {
				color: $primary-color;
			}
		}
	}
}
