56 lines
1.1 KiB
CSS
56 lines
1.1 KiB
CSS
.gallery-website-screens {
|
|
@apply bg-neutral-100 p-4 md:p-10 w-screen;
|
|
&--padding-simple {
|
|
@apply py-10;
|
|
}
|
|
&--padding-double {
|
|
@apply p-4 md:py-16;
|
|
}
|
|
margin: 0 calc(50% - 50vw);
|
|
|
|
&__screens-grid {
|
|
@apply gap-4 px-0 md:px-4 lg:px-12 justify-center list-none mx-auto;
|
|
&.is-grid {
|
|
@apply grid grid-cols-2 lg:grid-cols-3;
|
|
}
|
|
&.is-flex {
|
|
@apply flex flex-nowrap flex-col md:flex-row;
|
|
img {
|
|
@apply max-h-96;
|
|
}
|
|
&.height--small {
|
|
img {
|
|
@apply max-h-64;
|
|
}
|
|
}
|
|
&.height--medium {
|
|
img {
|
|
@apply max-h-80;
|
|
}
|
|
}
|
|
&.height--big {
|
|
img {
|
|
@apply max-h-96;
|
|
}
|
|
}
|
|
}
|
|
&.is-mobile-capture {
|
|
@apply md:gap-6 xl:gap-12;
|
|
img {
|
|
@apply rounded-xl xl:rounded-3xl max-w-60;
|
|
}
|
|
}
|
|
|
|
.gallery-website-screens__single-screen {
|
|
img {
|
|
width: 100%; /* Fixe la largeur max */
|
|
height: 100%; /* Fixe la hauteur max */
|
|
/* max-height: 500px; Ajuste selon ton besoin */
|
|
object-fit: cover; /* Évite les déformations */
|
|
}
|
|
}
|
|
|
|
max-width: 1800px;
|
|
}
|
|
}
|