#work-grid
{
    margin-bottom: 4rem;
}

html.no-js #work-grid
{
    display: block;
}

html.no-js #work-grid .grid-item
{
    margin-bottom: 4rem;
}

@media only screen and (max-width: 580px)
{

	#work-grid .grid-item
	{
		padding: 1rem;
	}

}

#work-grid .grid-item.expanded
{
    animation-delay: 100ms !important;
	background: transparent;
	border: none;
    grid-column: 1 / -1;
    margin-bottom: 6rem;
    order: -1;
	padding: 0;
}

#work-grid .grid-item.expanded a.screenshot-link
{
    cursor: default;
}

html.no-js #work-grid .grid-item a.screenshot-link
{
    pointer-events: none;
}

#work-grid .grid-item .screenshot
{
	margin: 0;
	max-width: 600px;
}

#work-grid .grid-item .screenshot.larger-size
{
    max-width: 800px;
}

.about-work
{
	display: none;
	margin-bottom: 3em;
    position: relative;
}

#work-grid .grid-item.expanded .about-work,
html.no-js .about-work
{
	display: block;
}

.about-work h3
{
	font-size: 4rem;
	margin: 0;
	padding-right: 34px;
}

.about-work .url
{
	color: #ccc;
	display: block;
	font: 1.8rem "Open Sans", sans-serif;
	margin-bottom: 1.5em;
	word-wrap: break-word;
}

.quote
{
	margin: 6rem 0;
	padding: 0 0 0 4rem;
}

.quote::before
{
    color: var(--accent-colour);
    content: "\f6b0";
    font-family: bootstrap-icons;
    font-size: 3rem;
    left: 0;
    position: absolute;
}

.quote p
{
	font-size: 3.4rem;
	font-weight: 300;
	margin-bottom: 2rem !important;
}

.quote cite
{
	font-size: 1.8rem;
	font-style: normal;
	font-weight: 700;
	line-height: 1.3;
}

.close-button
{
    background: transparent;
    padding: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.close-button:hover
{
    box-shadow: none;
}

.close-button::before
{
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    color: #fff;
    content: "\f659";
    font-family: bootstrap-icons;
    font-size: 2cap;
    text-rendering: auto;
}

@media only screen and (pointer: fine)
{

	.expanded .screenshot-link:hover .screenshot
	{
	    box-shadow: none;
		transform: none;
	}

}

@media only screen and (max-width: 380px)
{

    #work-grid .grid-item.expanded
    {
    	padding: 0;
    }

	.quote
	{
		padding-left: 1em;
		padding-right: 1em;
	}

}

#writing-wrapper
{
	margin-bottom: 6rem;
	overflow: hidden;
}

.writing-list
{
	float: left;
	width: 50%;
}

@media only screen and (max-width: 820px)
{

	.writing-list
	{
		float: none;
		margin: 0;
		padding: 0 !important;
		width: 100%;
	}

}

.writing-list.left-column
{
	padding-right: 2rem;
}

.writing-list.right-column
{
	padding-left: 2rem;
}