#media2-container,
#media2-content-container,
#media2-content-container #news,
#media2-content-container .news-item,
#media2-content-container #videos,
#media2-content-container .video-item
#media2-content-container #podcasts,
#media2-content-container .podcast-item,
#media2-content-container #infographics,
#media2-content-container .infographics-item
{
	width: 100%;
	height: 100%;
}

.media-card {
	padding: 8px;
	border-radius: 5px;
	box-shadow: 3px 3px 6px 2px rgba(0, 0, 0, 0.3);
	box-sizing: border-box;
}

#media2-content-container {
	padding: 4px;
	box-sizing: border-box;
}

#media2-container.mobile #media2-content-container {
	overflow-y: auto;
}

#media2-container.desktop #media2-content-container #news {
	display: grid;
	grid-gap: 1rem;
	grid-template-columns: repeat(6, 1fr);
	grid-template-rows: fit-content(0) 2em minmax(200px, 1fr);
	grid-template-areas:
		"news-orthobuzz          news-orthobuzz          news-orthobuzz          news-jbjs               news-jbjs               news-jbjs"
		"news-social-media-title news-social-media-title news-social-media-title news-social-media-title news-social-media-title news-social-media-title"
		"news-twitter            news-twitter            news-facebook           news-facebook           news-instagram          news-instagram";
}

#media2-container.mobile #news {
	display: grid;
	grid-gap: 1rem;
	grid-template-columns: 1fr;
	grid-template-rows: 176px 176px 2em 400px 400px 400px;
	grid-template-areas:
		"news-orthobuzz"
		"news-jbjs"
		"news-social-media-title"
		"news-twitter"
		"news-facebook"
		"news-instagram";
}

@media (min-width:600px) {
	#media2-container.mobile #news {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 176px 176px 2em 440px 560px;
		grid-template-areas:
			"news-orthobuzz          news-orthobuzz"
			"news-jbjs               news-jbjs"
			"news-social-media-title news-social-media-title"
			"news-twitter            news-twitter"
			"news-facebook           news-instagram";
	}
}

#news-jbjs               { grid-area: news-jbjs; }
#news-orthobuzz          { grid-area: news-orthobuzz; }
#news-social-media-title { grid-area: news-social-media-title; }
#news-facebook           { grid-area: news-facebook; }
#news-twitter            { grid-area: news-twitter; }
#news-instagram          { grid-area: news-instagram; }

.media-card.loading:not(.error) {
	display: flex;
	align-items: center;
}

.media-card .waiting-spinner, .media-card.loading blockquote {
	display: none;
}

.media-card.loading:not(.error) .waiting-spinner {
	display: block;
	margin: 0 auto;
}

.media-card.error {
	background: url(../images/error_notice.jpg) center no-repeat;
	background-size: contain;
	position: relative;
}

.media-card.error:after {
	content: "Image provided by Vecteezy.com";
	display: block;
	text-align: center;
	position: absolute;
	bottom: 5px;
	left: 0;
	width: 100%;
	font-size:10px;
}

#news-social-media-title {
	font-size: 1.5em;
	padding-top: 0.3em;
	box-sizing: border-box;
}

.social-media-widget {
	display: grid;
	grid-template-rows: 1.8em auto;
	grid-template-areas: "news-header"
		"media-card";
	grid-row-gap: 0.5em;
}

.social-media-widget .media-card {
	grid-area: media-card;
}

.news-header {
	grid-area: news-header;
	display: flex;
	align-items: center;
}

.news-header img {
	height: 100%;
	margin: 0 0.5em;
}

#news-twitter .media-card,
#news-instagram .media-card {
	overflow-y: auto;
}

#news-instagram iframe {
	box-sizing: border-box;
	width: 100%;
	position: relative !important; /* to fix Instagram's offscreen absolute positioning causing scrollbar display */
}

.news-card {
	display: grid;
	grid-row-gap: 1rem;
	grid-column-gap: 0.8rem;
	grid-template-columns: 1fr 80px;
	grid-template-rows: 1.2rem 8.5rem;
	grid-template-areas:
		"news-header news-link-all"
		"news-items news-items"
}

.news-card .header     { grid-area: news-header; }
.news-card .link-all   { grid-area: news-link-all; }
.news-card .news-items { grid-area: news-items; }

.news-card .link-all   {
	text-decoration: none;
	text-align: right;
	cursor: pointer;
}

.news-items {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.news-item {
	cursor: pointer;
	display: grid;
	grid-gap: 8px;
	grid-template-columns: 1fr 80px;
	grid-template-rows: 2.4rem;
	grid-template-areas:
		"news-title news-time"
}

.news-item .title { grid-area: news-title; }
.news-item .time  { grid-area: news-time; }

.news-item .time       {
	text-align: right;
}


#media2-container #videos {
	display: flex;
	gap: 1rem;
}
#media2-container.desktop #videos {
	flex-direction: row;
}
#media2-container.mobile #videos {
	flex-direction: column;
}
#media2-container.desktop .video-item {
	flex: 1 0 0;
}
#media2-container.mobile .video-item {
	flex: 0 1 350px;
}
#media2-container .video-item {
	display: grid;
	grid-gap: 0.8rem;
}
#media2-container.desktop .video-item {
	grid-template-areas:
		"video-image video-image"
		"video-header video-header"
		"video-count video-count"
		"video-text video-text"
		"video-btn video-btn";
	grid-template-columns: 1fr 96px;
	grid-template-rows: 40% 1.2rem 1.2rem 1fr fit-content(48px);
}
#media2-container.desktop .video-item:nth-child(2) {
	grid-template-areas:
		"video-header video-header"
		"video-count video-count"
		"video-text video-text"
		"video-btn video-btn"
		"video-image video-image";
	grid-template-rows: 1.2rem 1.2rem 1fr fit-content(48px) 40%;
}
@media (max-height: 767px) {
	#media2-container.desktop .video-item {
		grid-template-areas:
			"video-image video-image"
			"video-header video-count"
			"video-text video-text"
			"video-btn video-btn";
		grid-template-rows: 35% 1.2rem 1fr fit-content(48px);
	}
	#media2-container.desktop .video-item:nth-child(2) {
		grid-template-areas:
			"video-header video-count"
			"video-text video-text"
			"video-btn video-btn"
			"video-image video-image";
		grid-template-rows: 1.2rem 1fr fit-content(48px) 35%;
	}
	#media2-container.desktop .tabs-container {
		grid-gap: 2px;
		grid-template-rows: 40px fit-content(0) minmax(0, 1fr);
	}
	.video-item > .count  {
		text-align: right;
	}
}
@media (max-height: 639px) {
	#media2-container.desktop .video-item {
		grid-template-rows: 30% 1.2rem 1fr fit-content(48px);
	}
	#media2-container.desktop .video-item:nth-child(2) {
		grid-template-rows: 1.2rem 1fr fit-content(48px) 30%;
	}
}
@media (max-height: 609px) {
	#media2-container.desktop .video-item {
		grid-template-rows: 28% 1.2rem 1fr fit-content(48px);
	}
	#media2-container.desktop .video-item:nth-child(2) {
		grid-template-rows: 1.2rem 1fr fit-content(48px) 28%;
	}
}
#media2-container.mobile .video-item {
	grid-template-columns: 1fr 120px;
	grid-template-rows: 40vw 1.2em fit-content(100px) fit-content(100px);
	grid-template-areas:
		"video-image video-image"
		"video-header video-count"
		"video-text video-text"
		"video-btn video-btn";
}
.video-item > .image  { grid-area: video-image; }
.video-item > .header { grid-area: video-header; }
.video-item > .count  { grid-area: video-count; }
.video-item > .text   { grid-area: video-text; }
.video-item > .btn    { grid-area: video-btn; }

.video-item > .btn {
	width: 100%;
}
.video-item > .btn:hover {
	cursor: pointer;
}
.video-item > .image {
	background-size: cover;
	background-repeat: no-repeat;
	background-position: top;
}
#video-ortho > .image {
	background-image: url('../images/media2/media_video_ortho_image.jpg');
}
#video-abstracts > .image {
	background-image: url('../images/media2/media_video_abstracts_image.jpg');
}
#video-author-insights > .image {
	background-image: url('../images/media2/media_video_author_insights_image.jpg');
}

.desktop #podcasts-container {
	overflow: auto;
	height: 100%;
}

#media2-container.desktop #podcasts {
    padding: 3px 6px 6px 3px;
	display: grid;
	grid-gap: 1rem;
	grid-template-columns: repeat(6, 1fr);
	grid-template-areas:
		"podcast-your-case podcast-your-case podcast-orthojoe podcast-orthojoe podcast-orthocorps podcast-orthocorps"
		". podcast-jbjs-audio podcast-jbjs-audio podcast-standard podcast-standard .";
}

#media2-container.mobile #podcasts {
	display: grid;
	grid-gap: 1rem;
	grid-template-columns: 1fr;
	grid-template-rows: repeat(5, minmax(176px, fit-content));
    padding: 3px 6px 6px 3px;
	grid-template-areas:
		"podcast-your-case"
		"podcast-orthojoe"
		"podcast-orthocorps"
		"podcast-jbjs-audio"
		"podcast-standard";
}
#podcast-orthojoe { grid-area: podcast-orthojoe; }
#podcast-orthocorps { grid-area: podcast-orthocorps; }
#podcast-standard { grid-area: podcast-standard; }
#podcast-your-case { grid-area: podcast-your-case; }
#podcast-jbjs-audio { grid-area: podcast-jbjs-audio; }

.podcast-item {
	padding: 1em;
	box-sizing: border-box;
	display: grid;
	grid-column-gap: 1em;
	grid-row-gap: 0.8em;
	grid-template-columns: 2fr 5fr;
	grid-template-rows: 1.5em 1fr 22px;
	grid-template-areas:
		"podcast-header podcast-header"
		"podcast-logo podcast-text"
		"podcast-follow podcast-follow"
}
#media2-container.mobile .podcast-item {
	grid-template-rows: 1.5em minmax(8em, max-content);
}
.podcast-item > .header { grid-area: podcast-header; }
.podcast-item > .logo   { grid-area: podcast-logo; }
.podcast-item > .text   { grid-area: podcast-text; }
.podcast-item > .follow { grid-area: podcast-follow; }

.podcast-item > .header {
	text-transform: uppercase;
}

.podcast-item .links {
	margin-top: 1em;
	display: flex;
	justify-content: space-between;
}

.podcast-item .follow {
	display: flex;
	gap: 1em;
	align-items: end;
	justify-content: end;
	font-size: 0.9em;
}

.podcast-item .follow .icons {
	display: flex;
	gap: 0.8em;
}

.podcast-item .follow .icons > div {
	width: 1.5em;
	height: 1.5em;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	cursor: pointer;
}

.podcast-item .follow .icons .apple {
	background-image: url('../images/icons/apple-podcasts.png');
}

.podcast-item .follow .icons .spotify {
	background-image: url('../images/icons/spotify.png');
}

.podcast-item .follow .icons .youtube {
	background-image: url('../images/icons/youtube.png');
}

.podcast-item > .logo {
	background-size: contain;
	background-repeat: no-repeat;
	background-position: top;
}
#podcast-orthojoe > .logo {
	background-image: url('../images/media2/media_podcast_orthojoe_logo.jpg');
}
#podcast-orthocorps > .logo {
	background-image: url('../images/media2/media_podcast_orthocorps_logo.jpg');
}
#podcast-standard > .logo {
	background-image: url('../images/media2/media_podcast_standard_logo.jpg');
}
#podcast-your-case > .logo {
	background-image: url('../images/jbjs_podcast_ycioh_logo.png');
}
#podcast-jbjs-audio > .logo {
	background-image: url('../images/media2/media_podcast_jbjs_audio_logo.jpg');
}
#media2-container.desktop .podcast-item > .text {
	overflow-y: auto;
}

#media2-container #infographics {
	display: flex;
	gap: 5rem;
}
#media2-container.desktop #infographics {
	flex-direction: row;
}
#media2-container.mobile #infographics {
	flex-direction: column;
}

#media2-container #infographics-image {
	flex: 3 1 0;
	background-image: url('../images/media2/media_infographics_logo.jpg');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: top;
}

#media2-container #infographics-info {
	flex: 4 1 0;
	display: grid;
	grid-gap: 2rem;
	grid-template-columns: 1fr;
	grid-template-rows: 1rem fit-content(100%) 2rem;
	grid-template-areas:
		"infographics-title"
		"infographics-text"
		"infographics-button"
}

#infographics-info > .infographics-info-title  { grid-area: infographics-title; }
#infographics-info > .infographics-info-text   { grid-area: infographics-text; }
#infographics-info > .infographics-info-button { grid-area: infographics-button; }

#infographics-info > .btn {
	min-width: 50%;
	cursor: pointer;
}
@media (max-width:600px) {
	#infographics-info > .btn { min-width: 100%; }
}

#media2-content-container .btn {
	background-color: var(--jbjs-color);
	color: white;
}