/*
Sculptures CSS
*/

/* General
=================================================== */

/* Hero
========================= */
.hero { display: block; position: relative; width: 100%; height: 750px; max-height: calc(100vw* 0.36459); overflow: hidden; z-index: 999; }
.hero-block { display: block; width: 100%; height: 0; }
.hero-block .hero-bg { background-repeat: no-repeat; background-position: 50% 30%; background-size: cover; position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; width: 100%; height: 100%; overflow: hidden; }

.list-overview { display: flex; flex-direction: column; align-items: center; padding: 4em 2em 3em; width: 100%; }
.list-overview-inner { display: flex; flex-direction: column; margin: 0 auto; max-width: 1480px; width: 100%; }
.list-overview-title { display: flex; justify-content: flex-start; padding: 0 0 1.5em; }
.list-overview-title span { color: rgba(101, 54, 123, .8); font-family: 'Gloock'; font-size: calc(28px + (28 - 18) * ((100vw - 420px) / (1920 - 420))); font-weight: 600; letter-spacing: .08em; line-height: 1.2; margin: 0; padding: 0; text-transform: uppercase; }
.list-overview-details  { display: flex; flex-direction: column; }
.list-overview-details p { color: #000; font-family: 'Raleway'; font-size: 2rem; line-height: 1.6; margin: 0; padding: 0 0 1.2em; }
.list-overview-details p:last-of-type { padding: 0; }

/* Sculptures List
========================= */
.sculptures-list { padding: 1em 2em 4.5em; }
.sculptures-list.paged { padding: 1em 2em; }
.sculptures-list-inner { display: flex; flex-direction: column; margin: 0 auto; max-width: 1480px; width: 100%; }
.sculptures-list-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 35px; }
.sculptures-list-grid .column { display: grid; grid-column: span 1; grid-auto-rows: max-content; margin: 0; padding: 0; }
.sculptures-list-title { display: flex; justify-content: center; align-items: center; flex-direction: column; padding: .8em .5em .5em; }
.sculptures-list-title a { color: #000; font-family: 'Raleway'; font-size: 1.8rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.4; }
.sculptures-list-title a:hover { color: #c56fed; }
.sculptures-list-title span { color: #4c4c4c; font-family: 'Raleway'; font-size: 1.5rem; font-weight: 500; letter-spacing: .02em; line-height: 1.4; }

/* Pagination
========================= */
.pagination { display: flex; justify-content: center; padding: 4.5em 0 2em; }
.pagination .nav-links .page-numbers { display: inline-block; background-color: #fff; border: 1px solid #e5e5e5; border-radius: 4px; color: #222; cursor: pointer; font-size: 1.6rem; font-weight: 600; margin-bottom: 4px; padding: 4px 12px; text-decoration: none; }
.pagination .nav-links .page-numbers:hover { border: 1px solid #000; }
.pagination .nav-links .page-numbers.current { display: inline-block; background-color: #fff; border: 1px solid #000; border-radius: 4px; color: #222; cursor: pointer; font-size: 1.6rem; font-weight: 600; margin-bottom: 4px; padding: 4px 12px; text-decoration: none; }

/* Responsive
=================================================== */
@media only screen and (min-width: 1921px) {
}

@media only screen and (max-width: 1480px) {
.hero { max-height: calc(100vw* 0.37163); }
.list-overview { padding: 3.5em 2em 3em; }
}

@media only screen and (max-width: 1280px) {
.hero { max-height: calc(100vw * 0.3711); }
.list-overview { padding: 3.5em 2em 2.5em; }
.sculptures-list { padding: 1em 2em 3em; }
.sculptures-list-grid { gap: 30px; }
.pagination { padding: 4em 0 2em; }
}

@media only screen and (max-width: 1140px) {
.hero { max-height: calc(100vw* 0.37281); }
.list-overview { padding: 3em 2em 2em; }
.sculptures-list-grid { gap: 25px; }
.pagination { padding: 3.5em 0 2em; }
}

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

@media only screen and (max-width: 1024px) {
.hero { max-height: calc(100vw * 0.43946); }
.list-overview { padding: 2.5em 2em 2em; }
.list-overview-details p { font-size: 1.9rem; padding: 0 0 1em; }
.sculptures-list { padding: 1em 2em 2.5em; }
.sculptures-list.paged { padding: 1em 2em .5em; }
.sculptures-list-grid { grid-template-columns: repeat(2, 1fr); }
.pagination { padding: 3em 0 2.5em; }
}

@media only screen and (max-width: 880px) {
.hero { max-height: calc(100vw * 0.45455); }
.pagination { padding: 2.5em 0; }
}

@media only screen and (max-width: 768px) {
.hero { max-height: 350px; }
.list-overview { padding: 2.5em 1.5em 1.5em; }
.list-overview-title { padding: 0 0 1.25em; }
.sculptures-list { padding: 1em 1.5em 2.5em; }
.sculptures-list.paged { padding: 1em 1.5em; }
.sculptures-list-title a { font-size: 1.7rem; }
.pagination { padding: 2.5em 0 1.5em; }
}

@media only screen and (max-width: 719px) {
.sculptures-list-grid { gap: 20px; }
}

@media only screen and (max-width: 640px) {
.hero { max-height: 325px; }
.list-overview { padding: 2em 1.5em 1em; }
.list-overview-title { padding: 0 0 1em; }
.list-overview-details p { font-size: 1.8rem; padding: 0 0 1em; }
.sculptures-list-grid { grid-template-columns: repeat(1, 1fr); }
.sculptures-list-title span { font-size: 1.4rem; }
.sculptures-list.paged { padding: 1em 1.5em .5em; }
.pagination .nav-links .page-numbers { font-size: 1.5rem; }
.pagination .nav-links .page-numbers.current { font-size: 1.5rem; }
}

@media only screen and (max-width: 580px) {
.list-overview-details p { padding: 0 0 .8em; }
.pagination { padding: 2em 0 1em; }
}

@media only screen and (max-width: 520px) {
.sculptures-list { padding: .8em 1.5em 2em; }
}

@media only screen and (max-width: 480px) {
.hero { max-height: 300px; }
.list-overview { padding: 1.5em 1em 1em; }
.list-overview-title { padding: 0 0 .8em; }
.list-overview-details p { font-size: 1.6rem; padding: 0 0 .5em; }
.sculptures-list { padding: .8em 1em 2em; }
.sculptures-list-grid { gap: 15px; }
.sculptures-list-title a { font-size: 1.6rem; }
}

@media only screen and (max-width: 420px) {
.hero { max-height: 250px; }
}