/* Index */
#artworks {
	width: 80%;
	max-width: 1280px;
	margin:auto;
    padding-top: var(--header-height);
}
#artworks .grid {
    gap: var(--default-spacing);
}


/* View */
header.artwork_header {
	height:50vh;
    position: relative;
}
header.artwork_header img {
	 height: 50vh;
	 width:100%;
	 object-fit: cover;
}
#artwork_details,
#artwork .medias_container {
	padding: var(--default-spacing);
	margin-bottom: var(--default-spacing);
}
#artwork .medias_container {
    padding-top: 0;
}
h2.artwork_name {
	position:absolute;
    left: 0;
    right: 0;
	bottom: 0;
	padding: var(--default-spacing);
	z-index:1000;
}
h2.artwork_name span {
    display: block;
    max-width: 1280px;
    margin: auto;
    box-sizing: border-box;
    color: white;
    font-size: var(--title-font-size);
    line-height: var(--title-line-height);
	text-shadow: 0.5px 0.5px 0.5px #666;
}
#artwork_details {
	margin-bottom: var(--default-spacing);
	margin-top: var(--default-spacing);
}
#artwork_details .description {
	margin-bottom: var(--default-spacing);
}
#artwork li.media {
	margin-bottom: 30px;
}
#artwork li.media video {
    max-width: 1280px;
    margin: auto;
    display: block;
}
#artwork li.media img.horizontal {
    margin:auto;
    display:block;
    max-width: 1280px;
}
#artwork li.media img.vertical {
    margin:auto;
    display:block;
    height: auto;
    width: 100%;
}
#artwork .view_nav {
    text-align: center;
    padding-bottom: var(--default-spacing);
}
@media only screen and (min-width: 768px) {
    #artworks .grid {
        gap: var(--default-spacing) calc(var(--default-spacing) * 2);
    }
    header.artwork_header,
    header.artwork_header img {
        height:100vh;
    }
    h2.artwork_name {
    }
    #artwork_details {
        margin: var(--default-spacing) auto;
        max-width: 1280px;
    }
    #artwork_details main {
        display: flex;
    }
    #artwork li.media  {
        margin-bottom:100px;
    }
    #artwork h3.media_name {
        text-align:center;
    }
    #artwork_details .description {
        width: 70%;
        padding-right: calc(var(--default-spacing) * 2);
        margin-bottom: 0vh;
        box-sizing: border-box;
	}
    #artwork_details .technical {
        width: 30%;
    }
    #artwork li.media img.vertical {
        max-height: 100vh;
        width: auto;
    }
}
@media only screen and (min-width: 1280px) {
    #exhibitions {
        width:100%;
        max-width:1280px;
        margin:auto;
	}
}