.linkedin-preview {
	&__wrapper {
		padding: 20px;
		background-color: #fff;
		margin-inline: auto;
		max-width: clamp(200px, 100%, 555px);
	}

	// When the preview is in a section of all previews
	&__section &__wrapper {
		padding: 0;
	}

	&__section.social-preview__section {
		width: clamp(200px, 100%, 555px);
	}

	&__container {

		box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
		/* stylelint-disable-next-line scales/radii */
		border-radius: 8px;
		overflow: hidden;

		&.has-media {
			// When the preview has media, we want to hide the border radius on the bottom
			border-end-end-radius: 0;
			border-end-start-radius: 0;
		}
	}

	&__header {
		display: flex;
		gap: 0.5rem;
		padding: 0.8rem 1rem 0;
		margin-bottom: 0.8rem;

		&--avatar {
			width: 48px;
			height: 48px;
			border-radius: 50%;
			overflow: hidden;
			display: flex;
			align-items: center;
			flex-shrink: 0;
		}

		&--avatar img {
			width: 100%;
			object-fit: contain;
		}

		&--profile {
			display: flex;
			flex-direction: column;
			overflow: hidden;
		}

		&--profile-title {
			font-size: 0.75rem;
		}

		&--profile-info {
			display: flex;
			gap: 0.25rem;
		}

		&--profile-name {
			font-weight: 600;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		&--profile-meta {
			display: flex;
			align-items: center;
			gap: 0.25rem;
		}
	}

	&__caption {
		margin: 0 1rem;
		font-size: 0.875rem;
		line-height: 20px;
		font-weight: 400;
	}

	&__content article,
	&__media {
		margin-top: 0.5rem;
		background-color: #eef3f8;
		display: flex;
		flex-direction: column;
	}

	&__media-item {
		display: flex;

		img,
		video {
			width: 100%;
			object-fit: cover;
		}
	}

	&__description {
		padding: 0.5rem 0.75rem;

		&--title {
			margin: 0;
			font-size: 0.875rem;
			font-weight: 600;
		}

		&--meta {
			margin-top: 0.5rem;
			display: flex;
			gap: 0.25rem;
			font-size: 0.875rem;
			font-weight: 400;
			color: rgba(0, 0, 0, 0.6);
		}
	}

	&__image {
		object-fit: cover;
		width: 100%;
	}
}