@media (max-width: 781px) {
.single-artist .profile-header .wp-block-column {
display: flex;
flex-direction: column;
align-items: center;
}
.single-artist .profile-header .wp-block-post-featured-image {
max-width: 320px;
}
.single-artist .profile-header .genre-terms {
text-align: center;
}
.single-artist .profile-header .wp-block-buttons {
justify-content: center;
}
} .artists-block {
padding: 2rem 0;
}
.artists-block ul,
.artists-block li {
list-style: none;
padding: 0;
margin: 0;
}
.artists-block .artist-slider li {
padding: 1rem;
}
.artists-block .artist-list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 3rem;
} .artists-block .artist * {
text-align: center;
}
.artists-block .artist-image {
border-radius: 50%;
aspect-ratio: 1;
overflow: hidden;
transition: all 0.25s ease-in-out;
}
.artists-block .artist-image:hover {
transform: scale(1.05);
}
.artists-block .artist-image img {
width: 100%;
height: auto;
transition: all 0.25s ease-in-out;
}
.artists-block .artist-image:hover img {
transform: scale(1.05);
filter: brightness(1.1);
}
.artists-block .artist-title {
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
margin: 0 0 1.0rem;
}
.artists-block h3 {
text-transform: uppercase;
padding: 0;
margin: 0.5rem 0;
}
.artists-block .genre-terms {
min-height: 3.0rem;
padding: 0 1.5rem;
margin: -1.0rem 0 0.5rem;
}
.artists-block .genre-terms ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0 0.75rem;
font-size: var(--wp--preset--font-size--small);
}
.artists-block .genre-terms li {
padding: 0;
}
@media (max-width: 960px) {
.artists-block .artist-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 520px) {
.artists-block {
padding: 5vw;
}
.artists-block .artist-list {
grid-template-columns: repeat(1, minmax(0, 320px));
justify-content: center;
}
.artists-block .genre-terms {
min-height: auto;
}
} .styles-block {
padding: 2rem 0;
}
.styles-block ul,
.styles-block li {
list-style: none;
padding: 0;
margin: 0;
}
.styles-block .style-slider li {
padding: 1rem;
}
.styles-block .style-list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 3rem 2rem;
}
.styles-block .style-content * {
text-align: center;
}
.styles-block .style-image img {
width: 100%;
height: auto;
border-radius: 5px;
aspect-ratio: 1;
object-fit: cover;
transition: all 0.25s ease-in-out;
}
.styles-block .style-image:hover img {
filter: brightness(1.1);
transform: scale(1.03);
}
.styles-block .style-title {
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
margin: 0 0 1em;
}
.styles-block h3 {
margin: 0.5rem 0;
}
@media (max-width: 820px) {
.styles-block .style-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 520px) {
.styles-block {
padding: 5vw 0;
}
.styles-block .style-list {
grid-template-columns: repeat(1, minmax(0, 1fr));
justify-content: center;
}
} .genre-terms a {
text-underline-offset: 0.25em;
transition: all 0.25s ease-in-out;
}
.genre-terms a:hover {
text-decoration: underline;
text-underline-offset: 0.1em;
} .artwork-block {
padding: 2rem 0;
}
.artwork-block ul,
.artwork-block li {
list-style: none;
padding: 0;
margin: 0;
}
.artwork-block .artwork-slider li {
padding: 1rem;
}
.artwork-block .artwork-list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 2rem;
}
.artwork-block .artwork-image {
margin: 0;
}
.artwork-block .artwork-image img {
width: 100%;
height: auto;
border-radius: 5px;
aspect-ratio: 1;
object-fit: cover;
}
@media (max-width: 820px) {
.artwork-block .artwork-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 520px) {
.artwork-block {
padding: 5vw 0;
}
.artwork-block .artwork-list {
grid-template-columns: repeat(1, minmax(0, 1fr));
justify-content: center;
}
} .slider-controls {
display: flex;
align-items: center;
justify-content: center;
}
.slider-controls .slick-dots,
.slider-controls .slick-prev,
.slider-controls .slick-next {
position: static;
width: auto;
font-size: 0;
transform: none;
}
.slider-controls .slick-next {
order: 3;
}
.slider-controls .slick-arrow:before {
content: '';
font: unset;
padding: 10px;
border: solid var(--wp--preset--color--yellow);
border-width: 0 5px 5px 0;
display: block;
opacity: 1;
}
.slider-controls .slick-prev:before {
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}
.slider-controls .slick-next:before {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.slider-controls .slick-arrow:not(.slick-disabled):hover:before {
border-color: var(--wp--preset--color--white);
}
.slider-controls .slick-dots li {
width: auto;
height: 10px;
}
.slider-controls .slick-dots li button {
width: 10px;
height: 10px;
padding: 0;
background-color: var(--wp--preset--color--yellow);
border-radius: 50%;
opacity: 0.3;
}
.slider-controls .slick-dots li button:before {
content: '';
}
.slider-controls .slick-dots li.slick-active button {
opacity: 1;
}