.xin-artistes h1,
.xin-artiste h1,
.xin-expositions h1,
.xin-exposition h1,
.xin-actualites__titre {
margin: 20px 0 10px;
}
.xin-maj {
text-transform: uppercase;
}
.xin-grille,
.xin-artistes__grille {
display: grid;
gap: 0 30px;
margin: 0;
padding: 0;
list-style: none;
} .xin-carte {
margin-bottom: 20px;
padding: 4px;
background: #ffffff;
line-height: 1.42857143;
}
.xin-carte__media {
display: flex;
align-items: center;
justify-content: center;
width: 170px;
height: 170px;
margin: 0 auto;
overflow: hidden;
}
.xin-carte__media img {
display: block;
width: auto;
max-width: 100%;
height: auto;
max-height: 100%;
}
.xin-carte__caption {
padding: 9px;
color: #333333;
}
.xin-carte__caption h3,
.xin-artistes__nom {
margin: 2px 0;
font-size: 0.9em;
font-weight: 500;
letter-spacing: 1px;
text-align: center;
text-transform: uppercase;
}
.xin-carte__caption p {
text-align: center;
}
.xin-carte--oeuvre {
height: 220px;
}
.xin-grille--oeuvres > li {
margin-bottom: 20px;
}
.xin-carte--expo {
height: 275px;
border: 1px solid #dddddd;
border-radius: var(--xin-radius-s);
}
.xin-grille--oeuvres {
grid-template-columns: 1fr;
}
.xin-grille--expos {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 768px) {
.xin-grille--oeuvres {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.xin-grille--expos {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (min-width: 992px) {
.xin-grille--oeuvres,
.xin-grille--expos {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
} .xin-tabs__list {
display: flex;
flex-wrap: wrap;
margin-bottom: 15px;
}
.xin-tabs__list [role="tab"] {
padding: 10px 30px 10px 0;
border: 0;
background: transparent;
color: var(--xin-gris);
font: inherit;
line-height: 20px;
text-transform: uppercase;
cursor: pointer;
transition: color var(--xin-transition);
}
.xin-tabs__list [role="tab"]:hover {
color: var(--xin-rose);
}
.xin-tabs__list [role="tab"][aria-selected="true"] {
color: var(--xin-noir);
}
.xin-tabs__panel:focus-visible {
outline-offset: 6px;
} .xin-artistes__grille {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 768px) {
.xin-artistes__grille {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
@media (min-width: 992px) {
.xin-artistes__grille {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
}
.xin-artistes__item {
height: 220px;
margin-bottom: 20px;
padding: 4px;
}
.xin-artistes__media img {
display: block;
width: 140px;
max-width: 100%;
height: auto;
margin-inline: auto;
aspect-ratio: 1;
object-fit: cover;
}
.xin-artistes__nom {
padding: 9px 9px 0;
line-height: 1.1;
} .xin-bio {
display: grid;
gap: 0 30px;
}
.xin-bio__portrait img {
display: block;
max-width: 100%;
height: auto;
margin-inline: auto;
}
@media (min-width: 768px) {
.xin-bio {
grid-template-columns: 4fr 8fr;
} .xin-bio:not(:has(.xin-bio__portrait)) {
grid-template-columns: 8fr 4fr;
}
}
.xin-videos {
display: grid;
gap: 0 30px;
}
@media (min-width: 992px) {
.xin-videos--grille {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.xin-video {
margin-bottom: 20px;
}
.xin-video__lecteur iframe {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
border: 0;
}
.xin-video__lecteur video {
display: block;
width: 100%;
}
.xin-video__legende {
margin-top: 10px;
} .xin-oeuvre {
position: relative;
}
.xin-oeuvre__grille {
display: grid;
gap: 0 30px;
}
@media (min-width: 768px) {
.xin-oeuvre__grille {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.xin-oeuvre__couverture {
display: block;
cursor: zoom-in;
}
.xin-oeuvre__couverture img {
display: block;
max-width: 100%;
height: auto;
}
.xin-oeuvre__galerie {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 10px 0 0;
padding: 0;
list-style: none;
}
.xin-oeuvre__vue {
display: block;
width: 90px;
height: 90px;
cursor: zoom-in;
}
.xin-oeuvre__vue img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.85;
transition: opacity var(--xin-transition);
}
.xin-oeuvre__vue:hover img,
.xin-oeuvre__vue:focus-visible img {
opacity: 1;
}
.xin-oeuvre__infos {
color: var(--xin-noir);
}
.xin-oeuvre__infos h1,
.xin-oeuvre__infos h2 {
margin-top: 0;
text-transform: uppercase;
}
.xin-oeuvre__infos h2 {
font-size: 14px;
}
.xin-oeuvre__retour a {
color: var(--xin-gris);
}
.xin-oeuvre__retour {
margin-bottom: 60px;
}
@media (max-width: 767.98px) {
.xin-oeuvre__infos {
margin-top: 20px;
}
} .xin-switch {
position: absolute;
top: calc(50% - 10px);
z-index: 2;
color: #ffffff;
font-size: 60px;
line-height: 1.42857143;
text-shadow: 0 1px 2px rgb(0 0 0 / 0.6);
opacity: 0.5;
}
.xin-switch:hover,
.xin-switch:focus {
color: #ffffff;
opacity: 0.9;
}
.xin-switch--prev {
left: -30px;
}
.xin-switch--next {
right: 30px;
}
@media (max-width: 767.98px) {
.xin-switch {
top: 120px;
}
.xin-switch--prev {
left: 15px;
}
.xin-switch--next {
right: 15px;
}
} .xin-exposition__grille {
display: grid;
gap: 20px 30px;
}
@media (min-width: 768px) {
.xin-exposition__grille {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.xin-exposition__visuel img {
display: block;
max-width: 100%;
height: auto;
}
.xin-exposition__artistes {
margin-top: 20px;
} .xin-carrousel {
position: relative;
}
.xin-carrousel__inner {
position: relative;
width: 100%;
overflow: hidden;
}
.xin-carrousel__item {
display: none;
transition: transform 0.6s ease-in-out;
}
.xin-carrousel__item.is-active,
.xin-carrousel__item.is-entering {
display: block;
}
.xin-carrousel__item.is-entering {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.xin-carrousel__item.is-entering.is-right,
.xin-carrousel__item.is-leaving.is-right {
transform: translateX(100%);
}
.xin-carrousel__item.is-entering.is-left,
.xin-carrousel__item.is-leaving.is-left {
transform: translateX(-100%);
}
.xin-carrousel__media {
display: block;
}
.xin-carrousel__media img {
display: block;
width: auto;
max-width: 100%;
height: auto;
max-height: 600px;
margin: 0 auto;
object-fit: contain;
}
@media (min-width: 768px) {
.xin-carrousel__media img {
height: 600px;
}
}
.xin-carrousel__caption {
height: 56px;
padding: 0 0 5px;
color: var(--xin-noir);
text-align: center;
}
.xin-carrousel__artiste {
margin: 10px 0 5px;
font-size: 24px;
line-height: 1.1;
} .xin-carrousel__control {
position: absolute;
top: 0;
z-index: 2;
width: 10%;
height: calc(100% - 56px);
padding: 0;
border: 0;
background: none;
color: #ffffff;
font: inherit;
font-size: 60px;
text-align: center;
text-shadow: 0 1px 2px rgb(0 0 0 / 0.6);
opacity: 0.5;
cursor: pointer;
transition: opacity var(--xin-transition);
}
.xin-carrousel__control:hover,
.xin-carrousel__control:focus-visible {
opacity: 0.9;
}
.xin-carrousel__control span[aria-hidden] {
position: absolute;
top: 45%;
display: inline-block;
width: 30px;
height: 30px;
margin-top: -10px;
line-height: 1;
}
.xin-carrousel__control--prev {
left: 0;
}
.xin-carrousel__control--prev span[aria-hidden] {
left: 20%;
}
.xin-carrousel__control--next {
right: 0;
}
.xin-carrousel__control--next span[aria-hidden] {
right: 20%;
} .xin-actualites__titre {
font-size: 20px;
}
.xin-actualites__grille {
display: grid;
gap: 0 30px;
}
@media (min-width: 768px) {
.xin-actualites__grille {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.xin-actu__corps {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0 30px;
}
}
.xin-actu__titre {
text-transform: uppercase;
}
.xin-actu__titre a {
color: var(--xin-noir);
}
.xin-actu__titre a:hover {
color: var(--xin-rose);
}
.xin-actu__media img {
display: block;
max-width: 100%;
height: auto;
}
.xin-actu--oeuvre .xin-actu__media {
margin-top: 20px;
}
.xin-actu__texte--oeuvre {
padding-top: 60px;
}
.xin-actu__texte {
margin-bottom: 10px;
}
@media (max-width: 767.98px) {
.xin-actu__texte {
margin-top: 20px;
}
.xin-actu__texte--oeuvre {
padding-top: 40px;
}
} .xin-libre {
margin-top: 20px;
}