#art-bar {
display: flex;
flex-direction: column;
font-family: "Copperplate Gothic", sans-serif;
}
.category {
display: flex;
flex-direction: column;
margin-bottom: 15px;
}
.category > h2 {
}
.category > div {
/* margin-left: 5px; */
display: flex;
flex-direction: column;
}
.category a {
font-size: 18px;
}
.category a:hover {
text-decoration: underline;
}
article {
font-family: "Fira Sans", sans-serif;
}
article > h3 {
font-size: 30px;
margin-bottom: 4px;
}
#date,
#medium {
margin-bottom: -2px;
}
article > .text {
margin: 10px 0;
}
.collection.grid {
display: flex;
justify-content: space-evenly;
width: 100%;
flex-wrap: wrap;
}
.collection.grid > img {
margin: 0 5px 10px;
min-width: 30%;
max-width: 50%;
min-height: 300px;
max-height: 700px;
object-fit: contain;
}
.collection.carousel {
position: relative;
width: 75%;
}
.collection.carousel > .feed {
/* snap mandatory on horizontal axis */
scroll-snap-type: x mandatory;
overflow-x: scroll;
overflow-y: hidden;
display: flex;
align-items: center;
height: 500px;
/* Enable Safari touch scrolling physics which is needed for scroll snap */
-webkit-overflow-scrolling: touch;
}
.collection.carousel img {
scroll-snap-align: center;
position: relative;
margin: 10px;
// min-width: 75%;
min-height: 95%;
}
.collection.carousel > .btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
height: 30px;
width: 30px;
border-radius: 2px;
background-color: rgba(0,0,0,0.5);
background-position: 50% 50%;
background-repeat: no-repeat;
z-index: 1;
}
.collection.carousel > .btn.next {
background-image: url('data:image/svg+xml;charset=utf-8,');
right: 10px;
}
.collection.carousel > .btn.prev {
background-image: url('data:image/svg+xml;charset=utf-8,');
left: 10px;
}