Template:Mainpage/styles.css

#main-page {
	background-color: #ffffff;
	/*display: grid;*/
	/*grid-template-columns: 1fr 1fr 1fr;*/
	/*grid-auto-rows: auto;*/
	/*grid-auto-flow: dense;*/
	/*grid-gap: 1rem;*/
	margin-top: -80px;
	display: block; /*to get Packery working properly*/
}

.gridTemplate-column {
	height: 0;
	width: calc((100% / 3) - 1rem);
}

.gridTemplate-gutter {
	height: 0;
	width: 1rem;
}

@media (min-width: 1400px) {
	.gridTemplate-column,
	.mainpage-section {
		width: calc((100%/3) - (2rem / 3));
	}
	
	#homepage-welcome-image,
	#homepage-contents {
		width: calc(((100%/3)*2) - ((2rem / 3) * 2) + 1rem);
	}
}
@media (min-width: 720px) and (max-width: 1399px) {
	.gridTemplate-column,
	.mainpage-section {
		width: calc((100%/2) - (1rem / 2));
	}
	
	#homepage-welcome-image,
	#homepage-contents {
		width: 100%;
	}
}
@media (max-width: 719px) {
	.gridTemplate-column,
	.mainpage-section {
		width: 100%;
	}
}

.gridTemplate-column {
	height: 0;
	width: calc((100% / 3) - 1rem);
}

.gridTemplate-gutter {
	height: 0;
	width: 1rem;
}

#main-page-welcome-spacer {
	margin-bottom:50px;
}

#homepage-welcome-image {
	grid-column: span 2;
	border: none;
	box-shadow: none;
    text-align: center;
}

#homepage-contents {
	grid-column: span 2;
    min-width: 500px;
    flex-basis: 600px;
}

#homepage-contents .mainpage-content {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-column-gap: .8rem;
}

.mainpage-section h1 {
	display: block;
	font-size: 1.8em;
	margin: 0;
	padding: 0;
}

.mainpage-section .card {
    background-color: #ffffff;
    border: 1px solid #a6b3c0;
    border-radius: 4px;
    box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1);
    padding: .8rem;
}

.mainpage-section .card h2 {
	display: block;
	font-size: 1.5em;
	margin: 0;
	padding: 0;
}

.mainpage-section {
    background-color: #ffffff;
    border: 1px solid #a6b3c0;
    border-radius: 4px;
    box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1);
    box-sizing: border-box;
    padding: .8rem;
}

.mainpage-title {
	display: block;
	font-size: 1.2em;
	font-weight: 300;
	margin: 0;
	padding: 0;
	text-transform: uppercase;
}

.card-footer {
	background-color: #f7f7f7;
	border-top: 1px solid #dedede;
	border-radius: 0 0 4px 4px;
	margin: .8rem -.8rem -.8rem -.8rem;
	padding: .8rem;
}

/* Today's Episode Styles */

#homepage-today-episode .art {
	display: block;
	height: 0;
	margin: .8rem -.8rem;
	overflow: hidden;
	padding-bottom: 50%;
	position: relative;
}

#homepage-today-episode .art a {
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

#homepage-today-episode .art img {
	height: 100% !important;
	object-fit: cover;
	width: 100%;
}

#homepage-today-episode .title {
	display: block;
	font-size: 1.5em;
	margin-top: .8rem;
}

#homepage-today-episode .rating {
	border-bottom: 1px solid #dedede;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: .8rem;
	padding-bottom: .8rem;
}

#homepage-today-episode .secondary {
	color: #999999;
}

/* New Episodes Styles */

#homepage-new-episode ul {
	list-style: none;
	margin: .8rem -.8rem -.8rem;
	padding: 0;
}

#homepage-new-episode ul li {
	border-top: 1px solid #dedede;
	display: grid;
	grid-template-columns: 60px auto;
	grid-template-rows: 1fr 1fr;
	column-gap: .8rem;
	align-items: center;
	align-content: space-evenly;
	margin: 0;
	padding: .75rem .8rem;
}

#homepage-new-episode ul li > a {
	display: block;
	grid-row: span 2;
}

#homepage-new-episode .title {
	display: block;
	grid-area: 1 / 2 / 2 / 3;
}

#homepage-new-episode .tip {
	justify-self: end;
	grid-area: 1 / 2 / 2 / 3;
}

#homepage-new-episode .date {
	display: block;
	grid-area: 2 / 2 / 3 / 3;
}

#homepage-new-episode .countdown-new {
	color: #999999;
	grid-area: 2 / 2 / 3 / 3;
	justify-self: end;
}

#homepage-new-episode li:nth-child(-n+2) > * {
	opacity: 0.6;
	transition: opacity 100ms ease;
}

#homepage-new-episode li:nth-child(-n+2):hover > * {
	opacity: 1;
}

#homepage-new-episode .card-footer {
	font-size: .85em;
}

/* Latest News */

#homepage-latest-news .mainpage-content > ul {
	list-style: none;
	margin: .8rem -.8rem -.8rem;
	padding: 0;
}

#homepage-latest-news .mainpage-content > ul > li {
	border-top: 1px solid #dedede;
	display: grid;
	grid-template-columns: auto 60px;
	grid-template-rows: minmax(30px, max-content) minmax(30px, max-content) auto;
	column-gap: .8rem;
	align-items: center;
	align-content: space-evenly;
	margin: 0;
	padding: .75rem .8rem;
}

#homepage-latest-news .mainpage-content > ul > li > a {
	align-self: start;
	display: block;
	grid-column: 2;
	grid-row: span 2;
}

#homepage-latest-news .title {
	align-self: end;
	display: block;
	font-size: 1.2em;
	grid-area: 1 / 1 / 2 / 2;
}

#homepage-latest-news .secondary {
	align-self: start;
	color: #999999;
	display: block;
	grid-area: 2 / 1 / 3 / 2;
}

#homepage-latest-news .secondary > span {
	white-space: nowrap;
}

#homepage-latest-news .excerpt {
	display: block;
	grid-area: 3 / 1 / 4 / 3;
	margin-top: .8rem;
}

/* Featured Content */

#homepage-featured-content .title {
	display: block;
	font-size: 1.5em;
	padding-top: .8rem;
}

/* Podcasts */

/* Latest Products */

#homepage-new-releases .flickity-slider {
	display: flex;
	align-items: stretch;
	align-content: stretch;
}

#homepage-new-releases .flickity-slider > div {
	width: 100%;
	padding: .8rem;
	display: grid;
	grid-template-columns: auto;
	grid-template-rows: auto max-content max-content max-content;
	/*height: 100%;*/
	box-sizing: border-box;
	justify-items: center;
}

#homepage-new-releases .flickity-slider > div > a {
	display: block;
	align-self: center;
	justify-self: center;
	margin-bottom: .8rem;
}

#homepage-new-releases .flickity-slider > div > a img {
	/* width: 100%; */
	height: auto;
}

#homepage-new-releases .flickity-slider > div > .links {
	display: none;
}

@media (max-width: 650px) {
	.desktop-only {
		display: none;
	}
}