@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,700;1,300;1,700&display=swap');

body {
  font-family: sans-serif;
  background: #efefef;
  box-sizing: border-box;
}
.ultimate-post-kit-container {
  display: flow-root;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  max-width: 1300px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 14px;
  padding-right: 14px;
   margin-top: 30px;
   margin-bottom: 50px;
}

.upk-elite-grid {
	.upk-post-grid {
		display: grid;
		grid-template-columns: repeat(6, 1fr);
		grid-gap: 20px;
		.upk-post-grid-item {
			padding-top: 50px;
			position: relative;
			overflow: hidden;
			display: flex;
			transition: all .3s ease;
			.upk-post-grid-item-box {
				position: relative;
				.upk-blog-image-wrapper {
					position: relative;
					display: flex;
					.upk-main-image {
						overflow: hidden;
						display: flex;
						width: 100%;
						.upk-blog-image {
							width: 100%;
							height: 100%;
							object-fit: cover;
							transition: all .4s ease-in-out;
						}
					}
					.upk-blog-post-author-wrap {
						position: absolute;
						bottom: 0;
						left: 0;
						background: #fff;
						display: flex;
						align-items: center;
						.upk-author-img-wrap {
							img {
								border-radius: 50%;
							}
						}
						.upk-author-info-warp {
							display: flex;
							flex-direction: column;
							.author-name {
								.name {
									text-decoration: none;
									font-weight: 600;
									color: #283D58;
									text-transform: capitalize;
									letter-spacing: 1.1px;
									transition: all .3s ease-in-out;
								}
							}
							.author-depertment {
								color: #8D99AE;
								letter-spacing: 1px;
								text-transform: capitalize;
							}
						}
					}
				}
				.upk-blog-box-content {
					display: flex;
					align-items: center;
					.upk-blog-title-wrap {
						position: relative;
						display: inline-flex;
						.upk-blog-title {
							color: #283D58;
							font-weight: 600;
							line-height: 1.4;
							transition: all 0.5s ease;
							padding-left: 50px;
              text-decoration:none;
							&:hover {
								color: #EF233C;
								background-size: 100% 2px;
							}
							&:before {
								position: absolute;
								content: '';
								border: 1px solid #EF233C;
								width: 37px;
								left: 0;
							}
						}
					}
					.upk-blog-desc-wrap {
						padding-left: 50px;
						.upk-blog-desc {
							line-height: 1.5;
							letter-spacing: .5px;
							color: dark;
							opacity: 1;
							p {
								margin: 0;
							}
						
						}
					}
					.upk-blog-post-meta {
						display: flex;
						align-items: center;
						.author {
							width: 40px;
							border-radius: 30px;
						}
						.author-name {
							text-decoration: none;
							font-weight: 600;
              margin-bottom: 6px !important;
						}
					}
				}
				.upk-category-meta-list {
					display: none;
				}
				.upk-category-meta-wrap {
					position: absolute;
					right: 20px;
					top: 20px;
          display: flex;
          align-items:center;
				}
				.upk-elite-grid-category {
					display: flex;
					a {
						font-size: 14px;
						color: #dddfe2;
						font-weight: 600;
						padding: 4px 8px;
						display: flex;
						line-height: 1;
						border-radius: 3px;
						transition: all .3s ease;
            text-decoration:none;
            border: 1px solid #dddfe2;
						+ {
							a {
								margin-left: 5px;
							}
						}
					}
				}
				.upk-elite-grid-date {
					font-size: 14px;
					color: #ffffff;
					margin-right: 10px;
					display: flex;
					line-height: 1;
				}
			}
			&:hover {
				.upk-post-grid-item-box {
					.upk-main-image {
						.upk-blog-image {
							transform: scale(1.1);
						}
					}
				}
			}
		}
	}
	.upk-post-layout-1 {
		.upk-post-grid-item {
			&:nth-child(n+1) {
				grid-column: span 6/auto;
				.upk-post-grid-item-box {
					.upk-blog-post-author-wrap {
						padding: 20px 20px 20px 0;
						.upk-author-img-wrap {
							img {
								width: 48px;
							}
						}
						.upk-author-info-warp {
							padding-left: 15px;
							.author-name {
								.name {
									font-size: 14px;
								}
							}
							.author-depertment {
								font-size: 12px;
							}
						}
					}
					.upk-blog-box-content {
						padding: 30px 30px 30px 0;
						.upk-blog-title-wrap {
							margin-bottom: 10px;
							.upk-blog-title {
								font-size: 16px;
								&:before {
									top: 12px;
								}
							}
						}
						.upk-blog-desc-wrap {
							.upk-blog-desc {
								font-size: 13px;
							}
						}
					}
				}
			}
		}
	}
	.upk-post-layout-2 {
		.upk-post-grid-item {
			&:nth-child(5n+1) {
				grid-column: span 6/auto;
				.upk-post-grid-item-box {
					display: block;
					.upk-blog-post-author-wrap {
						padding: 20px 20px 20px 0;
						.upk-author-img-wrap {
							img {
								width: 48px;
							}
						}
						.upk-author-info-warp {
							padding-left: 15px;
							.author-name {
								.name {
									font-size: 14px;
								}
							}
							.author-depertment {
								font-size: 12px;
							}
						}
					}
					.upk-blog-box-content {
						padding: 20px;
						.upk-blog-title-wrap {
							margin-bottom: 10px;
							.upk-blog-title {
								font-size: 16px;
								&:before {
									top: 18px;
								}
							}
						}
						.upk-blog-desc-wrap {
							.upk-blog-desc {
								font-size: 13px;
							}
						}
					}
				}
			}
			&:nth-child(5n+2) {
				grid-column: span 6/auto;
				.upk-post-grid-item-box {
					.upk-blog-post-author-wrap {
						padding: 20px 20px 20px 0;
						.upk-author-img-wrap {
							img {
								width: 38px;
							}
						}
						.upk-author-info-warp {
							padding-left: 15px;
							.author-name {
								.name {
									font-size: 14px;
								}
							}
							.author-depertment {
								font-size: 12px;
							}
						}
					}
					.upk-blog-box-content {
						padding-top: 30px;
						padding-right: 30px;
						.upk-blog-title-wrap {
							margin-bottom: 10px;
							.upk-blog-title {
								font-size: 16px;
								&:before {
									top: 12px;
								}
							}
						}
						.upk-blog-desc-wrap {
							display: none;
							.upk-blog-desc {
								font-size: 13px;
							}
						}
					}
				}
			}
			&:nth-child(5n+3) {
				grid-column: span 6/auto;
				.upk-post-grid-item-box {
					.upk-blog-post-author-wrap {
						padding: 20px 20px 20px 0;
						.upk-author-img-wrap {
							img {
								width: 38px;
							}
						}
						.upk-author-info-warp {
							padding-left: 15px;
							.author-name {
								.name {
									font-size: 14px;
								}
							}
							.author-depertment {
								font-size: 12px;
							}
						}
					}
					.upk-blog-box-content {
						padding-top: 30px;
						padding-right: 30px;
						.upk-blog-title-wrap {
							margin-bottom: 10px;
							.upk-blog-title {
								font-size: 16px;
								&:before {
									top: 12px;
								}
							}
						}
						.upk-blog-desc-wrap {
							display: none;
							.upk-blog-desc {
								font-size: 13px;
							}
						}
					}
				}
			}
			&:nth-child(5n+4) {
				grid-column: span 6/auto;
				.upk-post-grid-item-box {
					.upk-blog-post-author-wrap {
						padding: 20px 20px 20px 0;
						.upk-author-img-wrap {
							img {
								width: 38px;
							}
						}
						.upk-author-info-warp {
							padding-left: 15px;
							.author-name {
								.name {
									font-size: 14px;
								}
							}
							.author-depertment {
								font-size: 12px;
							}
						}
					}
					.upk-blog-box-content {
						padding-top: 30px;
						padding-right: 30px;
						.upk-blog-title-wrap {
							margin-bottom: 10px;
							.upk-blog-title {
								font-size: 16px;
								&:before {
									top: 12px;
								}
							}
						}
						.upk-blog-desc-wrap {
							display: none;
							.upk-blog-desc {
								font-size: 13px;
							}
						}
					}
				}
			}
			&:nth-child(5n+5) {
				grid-column: span 6/auto;
				.upk-post-grid-item-box {
					.upk-blog-post-author-wrap {
						padding: 20px 20px 20px 0;
						.upk-author-img-wrap {
							img {
								width: 38px;
							}
						}
						.upk-author-info-warp {
							padding-left: 15px;
							.author-name {
								.name {
									font-size: 14px;
								}
							}
							.author-depertment {
								font-size: 12px;
							}
						}
					}
					.upk-blog-box-content {
						padding-top: 30px;
						padding-right: 30px;
						.upk-blog-title-wrap {
							margin-bottom: 10px;
							.upk-blog-title {
								font-size: 16px;
								&:before {
									top: 12px;
								}
							}
						}
						.upk-blog-desc-wrap {
							display: none;
							.upk-blog-desc {
								font-size: 13px;
							}
						}
					}
				}
			}
		}
	}
	.upk-post-layout-3 {
		.upk-post-grid-item {
			&:nth-child(4n+1) {
				grid-column: span 6/auto;
				grid-row: span 3/auto;
				.upk-post-grid-item-box {
					.upk-blog-post-author-wrap {
						padding: 20px 20px 20px 0;
						.upk-author-img-wrap {
							img {
								width: 38px;
							}
						}
						.upk-author-info-warp {
							padding-left: 15px;
							.author-name {
								.name {
									font-size: 14px;
								}
							}
							.author-depertment {
								font-size: 12px;
							}
						}
					}
					.upk-blog-box-content {
						padding: 30px 30px 30px 0;
						.upk-blog-title-wrap {
							margin-bottom: 10px;
							.upk-blog-title {
								font-size: 16px;
								&:before {
									top: 12px;
								}
							}
						}
						.upk-blog-desc-wrap {
							.upk-blog-desc {
								font-size: 13px;
							}
						}
					}
				}
			}
			&:nth-child(4n+2) {
				grid-column: span 6/auto;
				.upk-post-grid-item-box {
					display: block;
					.upk-blog-post-author-wrap {
						padding: 5px 5px 5px 0;
						.upk-author-img-wrap {
							img {
								width: 30px;
							}
						}
						.upk-author-info-warp {
							padding-left: 10px;
							.author-name {
								margin-bottom: 0px;
								.name {
									font-size: 12px;
								}
							}
							.author-depertment {
								font-size: 10px;
							}
						}
					}
					.upk-blog-box-content {
						padding-top: 15px;
						padding-right: 15px;
						padding-left: 15px;
						.upk-blog-title-wrap {
							margin-bottom: 10px;
							.upk-blog-title {
								font-size: 12px;
								&:before {
									top: 12px;
								}
							}
						}
						.upk-blog-desc-wrap {
							display: none;
						}
					}
					.upk-category-meta-wrap {
						display: none;
					}
					.upk-category-meta-list {
						display: flex;
						padding-left: 50px;
						.upk-elite-grid-date {
							margin-left: 10px;
							margin-right: 0;
						}
					}
				}
			}
			&:nth-child(4n+3) {
				grid-column: span 6/auto;
				.upk-post-grid-item-box {
					display: block;
					.upk-blog-post-author-wrap {
						padding: 5px 5px 5px 0;
						.upk-author-img-wrap {
							img {
								width: 30px;
							}
						}
						.upk-author-info-warp {
							padding-left: 10px;
							.author-name {
								margin-bottom: 0px;
								.name {
									font-size: 12px;
								}
							}
							.author-depertment {
								font-size: 10px;
							}
						}
					}
					.upk-blog-box-content {
						padding-top: 15px;
						padding-right: 15px;
						padding-left: 15px;
						.upk-blog-title-wrap {
							margin-bottom: 10px;
							.upk-blog-title {
								font-size: 12px;
								&:before {
									top: 12px;
								}
							}
						}
						.upk-blog-desc-wrap {
							display: none;
						}
					}
					.upk-category-meta-wrap {
						display: none;
					}
					.upk-category-meta-list {
						display: flex;
						padding-left: 50px;
						.upk-elite-grid-date {
							margin-left: 10px;
							margin-right: 0;
						}
					}
				}
			}
			&:nth-child(4n+4) {
				grid-column: span 6/auto;
				.upk-post-grid-item-box {
					display: block;
					.upk-blog-post-author-wrap {
						padding: 5px 5px 5px 0;
						.upk-author-img-wrap {
							img {
								width: 30px;
							}
						}
						.upk-author-info-warp {
							padding-left: 10px;
							.author-name {
								margin-bottom: 0px;
								.name {
									font-size: 12px;
								}
							}
							.author-depertment {
								font-size: 10px;
							}
						}
					}
					.upk-blog-box-content {
						padding-top: 15px;
						padding-right: 15px;
						padding-left: 15px;
						.upk-blog-title-wrap {
							margin-bottom: 10px;
							.upk-blog-title {
								font-size: 12px;
								&:before {
									top: 12px;
								}
							}
						}
						.upk-blog-desc-wrap {
							display: none;
						}
					}
					.upk-category-meta-wrap {
						display: none;
					}
					.upk-category-meta-list {
						display: flex;
						padding-left: 50px;
						.upk-elite-grid-date {
							margin-left: 10px;
							margin-right: 0;
						}
					}
				}
			}
		}
	}
}
.upk-global-link-yes {
	.upk-elite-grid {
		.upk-post-grid-item {
			&:hover {
				cursor: pointer;
			}
		}
	}
}
@media only screen and (min-width: 600px) {
	.upk-elite-grid {
		.upk-post-layout-1 {
			.upk-post-grid-item {
				&:nth-child(n+1) {
					grid-column: span 2/auto;
					.upk-post-grid-item-box {
						.upk-blog-box-content {
							.upk-blog-title-wrap {
								margin-bottom: 20px;
								.upk-blog-title {
									font-size: 20px;
								}
							}
							.upk-blog-desc-wrap {
								.upk-blog-desc {
									font-size: 15px;
								}
							}
						}
					}
				}
			}
		}
		.upk-post-layout-2 {
			.upk-post-grid-item {
				&:nth-child(5n+1) {
					grid-column: span 4/auto;
					.upk-post-grid-item-box {
						display: flex;
						.upk-blog-image-wrapper {
							max-width: 50%;
							min-width: 50%;
						}
						.upk-blog-box-content {
							.upk-blog-title-wrap {
								margin-bottom: 20px;
								.upk-blog-title {
									font-size: 25px;
								}
							}
							.upk-blog-desc-wrap {
								.upk-blog-desc {
									font-size: 16px;
								}
							}
						}
					}
				}
				&:nth-child(5n+2) {
					grid-column: span 2/auto;
					.upk-post-grid-item-box {
						.upk-blog-box-content {
							.upk-blog-title-wrap {
								margin-bottom: 20px;
								.upk-blog-title {
									font-size: 20px;
								}
							}
							.upk-blog-desc-wrap {
								.upk-blog-desc {
									font-size: 15px;
								}
							}
						}
					}
				}
				&:nth-child(5n+3) {
					grid-column: span 2/auto;
					.upk-post-grid-item-box {
						.upk-blog-box-content {
							.upk-blog-title-wrap {
								margin-bottom: 20px;
								.upk-blog-title {
									font-size: 20px;
								}
							}
							.upk-blog-desc-wrap {
								.upk-blog-desc {
									font-size: 15px;
								}
							}
						}
					}
				}
				&:nth-child(5n+4) {
					grid-column: span 2/auto;
					.upk-post-grid-item-box {
						.upk-blog-box-content {
							.upk-blog-title-wrap {
								margin-bottom: 20px;
								.upk-blog-title {
									font-size: 20px;
								}
							}
							.upk-blog-desc-wrap {
								.upk-blog-desc {
									font-size: 15px;
								}
							}
						}
					}
				}
				&:nth-child(5n+5) {
					grid-column: span 2/auto;
					.upk-post-grid-item-box {
						.upk-blog-box-content {
							.upk-blog-title-wrap {
								margin-bottom: 20px;
								.upk-blog-title {
									font-size: 20px;
								}
							}
							.upk-blog-desc-wrap {
								.upk-blog-desc {
									font-size: 15px;
								}
							}
						}
					}
				}
			}
		}
		.upk-post-layout-3 {
			.upk-post-grid-item {
				&:nth-child(4n+1) {
					grid-column: span 3/auto;
					.upk-post-grid-item-box {
						.upk-blog-box-content {
							.upk-blog-title-wrap {
								margin-bottom: 20px;
								.upk-blog-title {
									font-size: 25px;
									&:before {
										top: 16px;
									}
								}
							}
							.upk-blog-desc-wrap {
								.upk-blog-desc {
									font-size: 16px;
								}
							}
						}
					}
				}
				&:nth-child(4n+2) {
					grid-column: span 3/auto;
					.upk-post-grid-item-box {
						display: flex;
						.upk-blog-image-wrapper {
							width: 40%;
						}
						.upk-blog-box-content {
							width: 60%;
							padding-top: 0px;
							padding-right: 30px;
							.upk-blog-title-wrap {
								margin-bottom: 10px;
								.upk-blog-title {
									font-size: 16px;
									&:before {
										top: 12px;
									}
								}
							}
							.upk-blog-desc-wrap {
								display: none;
							}
						}
						.upk-blog-post-author-wrap {
							padding: 10px 10px 10px 0;
							.upk-author-img-wrap {
								img {
									width: 32px;
								}
							}
							.upk-author-info-warp {
								padding-left: 12px;
								.author-name {
									.name {
										font-size: 14px;
									}
								}
								.author-depertment {
									font-size: 12px;
								}
							}
						}
					}
				}
				&:nth-child(4n+3) {
					grid-column: span 3/auto;
					.upk-post-grid-item-box {
						display: flex;
						.upk-blog-image-wrapper {
							width: 40%;
						}
						.upk-blog-box-content {
							width: 60%;
							padding-top: 0px;
							padding-right: 30px;
							.upk-blog-title-wrap {
								margin-bottom: 10px;
								.upk-blog-title {
									font-size: 16px;
									&:before {
										top: 12px;
									}
								}
							}
							.upk-blog-desc-wrap {
								display: none;
							}
						}
						.upk-blog-post-author-wrap {
							padding: 10px 10px 10px 0;
							.upk-author-img-wrap {
								img {
									width: 32px;
								}
							}
							.upk-author-info-warp {
								padding-left: 12px;
								.author-name {
									.name {
										font-size: 14px;
									}
								}
								.author-depertment {
									font-size: 12px;
								}
							}
						}
					}
				}
				&:nth-child(4n+4) {
					grid-column: span 3/auto;
					.upk-post-grid-item-box {
						display: flex;
						.upk-blog-image-wrapper {
							width: 40%;
						}
						.upk-blog-box-content {
							width: 60%;
							padding-top: 0px;
							padding-right: 30px;
							.upk-blog-title-wrap {
								margin-bottom: 10px;
								.upk-blog-title {
									font-size: 16px;
									&:before {
										top: 12px;
									}
								}
							}
							.upk-blog-desc-wrap {
								display: none;
							}
						}
						.upk-blog-post-author-wrap {
							padding: 10px 10px 10px 0;
							.upk-author-img-wrap {
								img {
									width: 32px;
								}
							}
							.upk-author-info-warp {
								padding-left: 12px;
								.author-name {
									.name {
										font-size: 14px;
									}
								}
								.author-depertment {
									font-size: 12px;
								}
							}
						}
					}
				}
			}
		}
	}
}
@media only screen and (min-width: 600px) and (max-width: 1024px) {
	.upk-elite-grid {
		.upk-post-layout-1 {
			.upk-post-grid-item {
				&:nth-child(n+1) {
					grid-column: span 3/auto;
				}
			}
		}
		.upk-post-layout-2 {
			.upk-post-grid-item {
				&:nth-child(5n+1) {
					grid-column: span 6/auto;
					.upk-post-grid-item-box {
						.upk-blog-box-content {
							.upk-blog-title-wrap {
								.upk-blog-title {
									font-size: 20px;
									&:before {
										top: 14px;
									}
								}
							}
							.upk-blog-desc-wrap {
								.upk-blog-desc {
									font-size: 15px;
								}
							}
						}
					}
				}
				&:nth-child(5n+2) {
					grid-column: span 3/auto;
					.upk-post-grid-item-box {
						.upk-blog-box-content {
							.upk-blog-title-wrap {
								.upk-blog-title {
									&:before {
										top: 14px;
									}
								}
							}
						}
					}
				}
				&:nth-child(5n+3) {
					grid-column: span 3/auto;
					.upk-post-grid-item-box {
						.upk-blog-box-content {
							.upk-blog-title-wrap {
								.upk-blog-title {
									&:before {
										top: 14px;
									}
								}
							}
						}
					}
				}
				&:nth-child(5n+4) {
					grid-column: span 3/auto;
					.upk-post-grid-item-box {
						.upk-blog-box-content {
							.upk-blog-title-wrap {
								.upk-blog-title {
									&:before {
										top: 14px;
									}
								}
							}
						}
					}
				}
				&:nth-child(5n+5) {
					grid-column: span 3/auto;
					.upk-post-grid-item-box {
						.upk-blog-box-content {
							.upk-blog-title-wrap {
								.upk-blog-title {
									&:before {
										top: 14px;
									}
								}
							}
						}
					}
				}
			}
		}
		.upk-post-layout-3 {
			.upk-post-grid-item {
				&:nth-child(4n+1) {
					grid-column: span 6/auto;
				}
				&:nth-child(4n+2) {
					grid-column: span 6/auto;
					.upk-post-grid-item-box {
						display: flex;
					}
				}
				&:nth-child(4n+3) {
					grid-column: span 6/auto;
					.upk-post-grid-item-box {
						display: flex;
					}
				}
				&:nth-child(4n+4) {
					grid-column: span 6/auto;
					.upk-post-grid-item-box {
						display: flex;
					}
				}
			}
		}
	}
}


// For demo purpose
.button {
  text-align: center;
  margin-top: 50px;
  margin-bottom: 50px;
  a {
    text-decoration: none;
    background: #e20000;
    padding: 10px 20px;
    color: #fff;
    text-transform: capitalize;
    font-weight: 600;
    font-size: 14px;
    border-radius: 3px;
    transition: all 0.3s ease;
    &:hover {
      background: #f00;
    }
  }
}