/* -----------------------------------------------------------------------------
   Activity Feed Update Layout
   ----------------------------------------------------------------------------- */

.bond-bp-content {
	& #buddypress {
		& .screen-content #activity-stream .activity-list.bp-list > li.activity.activity_update.activity-item:not(.activity-popup):not(.bond-activity-template) {
			display: grid;
			grid-template-columns: 50px minmax(0, 1fr);
			column-gap: 20px;
			padding: 24.99px 20px 0;

			& > .activity-avatar.item-avatar {
				grid-column: 1;
				grid-row: 1 / span 3;
				position: relative;
				top: auto;
				left: auto;
				width: 50px;
				height: 40px;
				margin: 0;
				padding-right: 10px;

				& img {
					display: block;
					width: 40px;
					height: 40px;
					border-radius: 50%;
					object-fit: cover;
				}
			}

			& > .activity-header:not(.activity-header--group) {
				grid-column: 2;
				margin: 0;
				padding: 0 32px 0 0;

				& p,
				& .activity-topic {
					margin: 0;
					color: var(--color-bond-black);
					font-size: 1rem;
					line-height: 1.5;
				}

				& .activity-topic {
					margin-top: 1px;
				}

				& .activity-topic:empty {
					display: none;
				}

				& .time-since::before {
					content: "\00b7";
					margin: 0 3px;
					color: #989482;
				}
			}

			& > .activity-title {
				grid-column: 2;
				margin: 0;
				padding: 19px 20px 0 0;

				& h2 {
					margin: 0;
					color: var(--color-bond-black);
					font-size: 19px;
					font-weight: 400;
					line-height: 29px;
				}
			}

			& > .activity-content {
				grid-column: 1 / -1;
				display: flex;
				flex-direction: column;
				margin: 0;
				padding: 12px 0 0;

				& .activity-inner {
					margin: 0;
					padding: 0 20px 0 50px;
					color: var(--color-bond-grey);
					font-size: 17px;
					font-weight: 500;
					line-height: 25.5px;

					& p {
						margin: 0;
						color: inherit;
						font-size: inherit;
						font-weight: inherit;
						line-height: inherit;
					}

					& p + p {
						margin-top: 12px;
					}
				}

				& .bb-activity-media-wrap,
				& .activity-feature-image {
					margin-top: 12px;
				}

				& .bb-activity-media-wrap,
				& .activity-feature-image,
				& .activity-state {
					padding-left: 50px;
				}

				& .activity-state {
					padding-left: 0;
				}

				& .bb-activity-media-wrap:empty,
				& .bb-activity-media-elem:empty {
					display: none;
				}

				& .bb-activity-media-wrap {
					width: 100%;
				}

				& .bb-activity-media-elem {
					width: auto;
					max-width: min(100%, 320px);
					margin: 0;
					padding: 0;
				}

				& .bb-open-media-theatre,
				& .activity-feature-image {
					display: block;
					width: fit-content;
					max-width: min(100%, 320px);
				}

				& .bb-open-media-theatre img,
				& .activity-feature-image img {
					display: block;
					width: auto;
					max-width: 100%;
					height: auto;
					max-height: 220px;
					border-radius: 4px;
					object-fit: cover;
				}
			}

			& > .activity-comments {
				grid-column: 1 / -1;
				width: 100%;
				margin: 0;
			}
		}
	}
}

@media (max-width: 991px) {
	.bond-bp-content #buddypress .screen-content #activity-stream .activity-list.bp-list > li.activity.activity_update.activity-item:not(.activity-popup):not(.bond-activity-template) {
		grid-template-columns: 44px minmax(0, 1fr);
		column-gap: 16px;
		padding: 16px 16px 0;

		& > .activity-avatar.item-avatar {
			width: 44px;
			height: 40px;
			padding-right: 4px;

			& img {
				width: 40px;
				height: 40px;
			}
		}

		& > .activity-header:not(.activity-header--group) {
			padding-right: 16px;
		}

		& > .activity-content .activity-inner {
			padding: 0 20px 0 50px;
			font-size: 1rem;
		}

		& > .activity-content .bb-activity-media-wrap,
		& > .activity-content .activity-feature-image {
			padding-left: 50px;
		}
	}
}

@media (max-width: 640px) {
	.bond-bp-content #buddypress .screen-content #activity-stream .activity-list.bp-list > li.activity.activity_update.activity-item:not(.activity-popup):not(.bond-activity-template) {
		grid-template-columns: 40px minmax(0, 1fr);
		column-gap: 12px;
		padding: 14px 12px 0;

		& > .activity-content .activity-inner {
			padding: 0 12px 0 44px;
			font-size: 0.9375rem;
		}

		& > .activity-content .bb-activity-media-wrap,
		& > .activity-content .activity-feature-image {
			padding-left: 44px;
		}
	}
}