@xscriptor/xcomponents 0.1.0

package/dist/components/index.css

@@ -0,0 +1,1181 @@
+/* src/components/forms/xcontactform/XContactForm.module.css */
+.wrapper {
+  --input-padding: .65rem .9rem;
+  --font-size: 16px;
+  --form-gap: 1.25rem;
+  --row-gap: .85rem;
+  --field-gap: .45rem;
+  --button-min-width: 140px;
+  --label-color: inherit;
+  --wrapper-bg-color: transparent;
+  --wrapper-border-color: transparent;
+  --wrapper-border-width: 0px;
+  --wrapper-border-style: solid;
+  --wrapper-radius: .5rem;
+  --field-border-color: var(--border, #ccc);
+  --field-border-width: 1px;
+  --field-border-style: solid;
+  --field-radius: .5rem;
+  --btn-bg-color: var(--bg, #333);
+  --btn-text-color: var(--text, #fff);
+  --btn-border-color: transparent;
+  --btn-border-width: 0px;
+  --btn-border-style: solid;
+  --btn-radius: .5rem;
+  --btn-alignment: flex-start;
+  --btn-hover-bg-color: var(--btn-bg-color);
+  --btn-hover-text-color: var(--btn-text-color);
+  --btn-hover-border-color: var(--btn-border-color);
+  --status-ok-color: #1fa37a;
+  --status-error-color: #d16a6a;
+  max-width: 900px;
+  margin: 0 auto;
+  padding: 2rem 1rem;
+  background-color: var(--wrapper-bg-color);
+  border: var(--wrapper-border-width) var(--wrapper-border-style) var(--wrapper-border-color);
+  border-radius: var(--wrapper-radius);
+}
+.small {
+  --input-padding: .35rem .55rem;
+  --font-size: 13px;
+  --form-gap: .75rem;
+  --row-gap: .6rem;
+  --field-gap: .3rem;
+  --button-min-width: 118px;
+}
+.medium {
+  --input-padding: .5rem .7rem;
+  --font-size: 15px;
+  --form-gap: 1rem;
+  --row-gap: .7rem;
+  --field-gap: .4rem;
+  --button-min-width: 130px;
+}
+.large {
+  --input-padding: 1rem 1.2rem;
+  --font-size: 18px;
+  --form-gap: 1.5rem;
+  --row-gap: 1rem;
+  --field-gap: .5rem;
+  --button-min-width: 150px;
+}
+.form {
+  display: grid;
+  gap: var(--form-gap);
+  max-width: 100%;
+}
+.row {
+  display: grid;
+  gap: var(--row-gap);
+}
+.grid .row {
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+}
+.vertical .row {
+  grid-template-columns: 1fr;
+}
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--field-gap);
+}
+.field label {
+  font-size: calc(var(--font-size) - 2px);
+  font-weight: 500;
+  color: var(--label-color);
+}
+.field input,
+.field textarea {
+  width: 100%;
+  padding: var(--input-padding);
+  border: var(--field-border-width) var(--field-border-style) var(--field-border-color);
+  border-radius: var(--field-radius);
+  font-size: var(--font-size);
+  box-sizing: border-box;
+  font-family: inherit;
+}
+.field input::placeholder,
+.field textarea::placeholder {
+  color: #888;
+}
+.buttoncontainer {
+  display: flex;
+  justify-content: var(--btn-alignment);
+  margin-top: 0.25rem;
+}
+.button {
+  padding: var(--input-padding);
+  border-radius: var(--btn-radius);
+  border: var(--btn-border-width) var(--btn-border-style) var(--btn-border-color);
+  background-color: var(--btn-bg-color);
+  color: var(--btn-text-color);
+  cursor: pointer;
+  font-size: var(--font-size);
+  font-weight: 600;
+  min-width: var(--button-min-width);
+  transition:
+    background-color 0.2s ease,
+    color 0.2s ease,
+    border-color 0.2s ease,
+    opacity 0.2s ease;
+}
+.button:hover {
+  background-color: var(--btn-hover-bg-color);
+  color: var(--btn-hover-text-color);
+  border-color: var(--btn-hover-border-color);
+  opacity: 0.95;
+}
+.status {
+  min-height: 1.5rem;
+  font-size: calc(var(--font-size) - 2px);
+  margin-top: 0.25rem;
+}
+.statusOk {
+  color: var(--status-ok-color);
+}
+.statusError {
+  color: var(--status-error-color);
+}
+.honeypot {
+  position: absolute;
+  left: -9999px;
+  top: -9999px;
+}
+.withDecorativeX {
+  position: relative;
+  padding-top: 2.5rem;
+  padding-bottom: 2.5rem;
+}
+.decorativeXTop,
+.decorativeXBottom {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 0.5rem;
+  font-weight: 300;
+  color: var(--decorative-x-color, currentColor);
+  opacity: 1;
+  pointer-events: none;
+  background-color: var(--wrapper-bg-color, transparent);
+  padding: 0 0.3rem;
+  line-height: 1;
+  z-index: 1;
+}
+.decorativeXTop {
+  top: 0;
+  transform: translate(-50%, -50%);
+}
+.decorativeXBottom {
+  bottom: 0;
+  transform: translate(-50%, 50%);
+}
+
+/* src/components/forms/xnewsletter/XNewsletter.module.css */
+.container {
+  --nws-accent: var(--accent);
+  --nws-text: var(--text);
+  --nws-border: var(--border);
+  --nws-btn-text: var(--accent-text);
+  width: 100%;
+  font-family: "EB Garamond", serif;
+}
+.form {
+  display: flex;
+  gap: 1rem;
+}
+.horizontal {
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+@media (min-width: 768px) {
+  .horizontal {
+    flex-direction: row;
+  }
+}
+.vertical {
+  flex-direction: column;
+  align-items: flex-start;
+  width: 100%;
+  max-width: 24rem;
+  margin: 0 auto;
+}
+.title {
+  font-size: 0.875rem;
+  white-space: nowrap;
+  font-weight: 500;
+  color: var(--nws-text);
+}
+.input {
+  width: 100%;
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+  border-radius: 0.5rem;
+  border: 1px solid var(--nws-border);
+  background-color: transparent;
+  outline: none;
+  transition: border-color 0.2s ease;
+  color: var(--nws-text);
+  caret-color: var(--nws-accent);
+  font-family: inherit;
+}
+.horizontal .input {
+}
+@media (min-width: 768px) {
+  .horizontal .input {
+    width: 16rem;
+  }
+}
+.input:focus {
+  border-color: var(--nws-accent);
+}
+.actions {
+  display: flex;
+  gap: 1rem;
+}
+.actionsHorizontal {
+  flex-direction: row;
+  align-items: center;
+}
+.actionsVertical {
+  flex-direction: column;
+  align-items: flex-start;
+  width: 100%;
+}
+.checkboxLabel {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.75rem;
+  white-space: nowrap;
+  cursor: pointer;
+  color: var(--nws-text);
+}
+.checkboxLabel span {
+  opacity: 0.7;
+}
+.checkbox {
+  height: 0.875rem;
+  width: 0.875rem;
+  border-radius: 0.125rem;
+  cursor: pointer;
+  accent-color: var(--nws-accent);
+}
+.termsLink {
+  text-decoration: underline;
+  color: var(--nws-accent);
+  transition: opacity 0.2s ease;
+}
+.termsLink:hover {
+  opacity: 1;
+}
+.button {
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+  border-radius: 0.5rem;
+  border: 1px solid var(--nws-accent);
+  color: var(--nws-accent);
+  background-color: transparent;
+  transition: all 0.2s ease;
+  white-space: nowrap;
+  cursor: pointer;
+}
+.button:hover:not(:disabled) {
+  background-color: var(--nws-accent);
+  color: var(--nws-btn-text);
+}
+.button:disabled,
+.input:disabled,
+.checkbox:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.actionsVertical .button {
+  width: 100%;
+}
+.message {
+  margin-top: 0.75rem;
+  font-size: 0.75rem;
+  color: var(--nws-accent);
+}
+.messageHorizontal {
+  text-align: center;
+}
+.messageVertical {
+  text-align: left;
+}
+
+/* src/components/navigation/xnavbar/XNavbar.module.css */
+.header {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 2rem 3rem;
+  background: var(--bg);
+  color: var(--text);
+  font-size: 1.25rem;
+  z-index: 60;
+}
+@media (min-width: 640px) {
+  .header {
+    padding-inline: 2rem;
+  }
+}
+@media (min-width: 768px) {
+  .header {
+    padding-inline: 3rem;
+  }
+}
+@media (min-width: 1024px) {
+  .header {
+    padding-inline: 5rem;
+  }
+}
+@media (min-width: 1280px) {
+  .header {
+    padding-inline: 12rem;
+  }
+}
+.desktopNav {
+  display: none;
+  align-items: center;
+  width: 100%;
+  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+  padding-bottom: 0.5rem;
+}
+@media (min-width: 768px) {
+  .desktopNav {
+    display: grid;
+  }
+}
+.desktopLinksLeft,
+.desktopLinksRight {
+  display: flex;
+  align-items: center;
+  gap: 1.5rem;
+  min-width: 0;
+}
+.desktopLinksLeft {
+  justify-content: flex-end;
+}
+.desktopLinksRight {
+  justify-content: flex-start;
+}
+.logoSlot {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.logoWrapper {
+  position: relative;
+  margin-inline: 1rem;
+  display: flex;
+  align-items: center;
+}
+.logoBtn {
+  font-weight: 700;
+  font-size: 1.5rem;
+  line-height: 1;
+  user-select: none;
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--text);
+  padding: 0;
+}
+.iconTray {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  pointer-events: none;
+}
+.iconTrayRight {
+  left: 100%;
+  padding-left: 0.75rem;
+}
+.iconTrayLeft {
+  right: 100%;
+  padding-right: 0.75rem;
+}
+.navLink {
+  padding: 0.25rem;
+  border-bottom: 2px solid transparent;
+  transition:
+    border-color 0.2s,
+    opacity 0.2s,
+    color 0.2s;
+  color: var(--xnav-link-color, var(--text));
+  text-decoration: none;
+  white-space: nowrap;
+}
+.navLink:hover {
+  color: var(--xnav-link-hover, var(--xnav-link-color, var(--text)));
+  opacity: var(--xnav-link-hover-opacity, 0.7);
+}
+.navLinkActive {
+  border-bottom-color: var(--xnav-link-active, var(--xnav-link-color, var(--text)));
+  font-weight: 600;
+}
+.navLinkExternal::after {
+  content: " \2197";
+  font-size: 0.7em;
+  opacity: 0.6;
+}
+.mobileToggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+@media (min-width: 768px) {
+  .mobileToggle {
+    display: none;
+  }
+}
+.hamburgerBtn {
+  width: 2.5rem;
+  height: 2rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  background: none;
+  border: none;
+  cursor: pointer;
+  position: relative;
+  z-index: 80;
+  padding: 0;
+}
+.bar {
+  width: var(--xnav-bar-w, 2rem);
+  height: var(--xnav-bar-h, 3px);
+  background: var(--xnav-bar-color, var(--text));
+  border-radius: 2px;
+}
+.mobileOverlay {
+  position: fixed;
+  inset: 0;
+  width: 100vw;
+  height: 100svh;
+  background: var(--bg);
+  color: var(--text);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 2rem;
+  font-size: 2.5rem;
+  z-index: 9999;
+}
+.mobileCloseBtn {
+  position: fixed;
+  top: 2rem;
+  left: 1rem;
+  width: 2.5rem;
+  height: 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--xnav-bar-color, var(--text));
+  z-index: 10000;
+  -webkit-tap-highlight-color: transparent;
+}
+.closeBar {
+  display: block;
+  position: absolute;
+  width: 2rem;
+  height: 3px;
+  border-radius: 2px;
+  background: currentColor;
+}
+.mobileLogo {
+  font-weight: 700;
+  font-size: 3rem;
+  user-select: none;
+  pointer-events: none;
+}
+.mobileNavLink {
+  font-size: 2.5rem;
+  color: var(--xnav-link-color, var(--text));
+  text-decoration: none;
+  border-bottom: 2px solid transparent;
+  transition:
+    border-color 0.2s,
+    color 0.2s,
+    opacity 0.2s;
+  padding: 0.25rem;
+}
+.mobileNavLink:hover {
+  color: var(--xnav-link-hover, var(--xnav-link-color, var(--text)));
+  opacity: var(--xnav-link-hover-opacity, 0.7);
+}
+.mobileNavLinkActive {
+  font-weight: 600;
+  border-bottom-color: var(--xnav-link-active, var(--xnav-link-color, var(--text)));
+}
+.themeToggleMobile {
+  margin-top: 1rem;
+  font-size: 1rem;
+  padding: 0.5rem 1rem;
+  border: 1px solid var(--border);
+  border-radius: 0.375rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  background: none;
+  color: var(--text);
+  cursor: pointer;
+  transition: opacity 0.2s;
+}
+.themeToggleMobile:hover {
+  opacity: 0.7;
+}
+
+/* src/components/layout/xfooter/XFooter.module.css */
+.XFooter {
+  width: 100%;
+  background-color: var(--xf-bg, transparent);
+  color: var(--xf-text, #333);
+  padding: var(--xf-py, 0.9rem) 0.6rem;
+}
+.container {
+  max-width: 1280px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.6rem;
+}
+.nav {
+  display: grid;
+  gap: 0.5rem 1.5rem;
+  grid-template-columns: repeat(var(--xf-cols, 1), minmax(0, auto));
+  justify-content: center;
+  text-align: center;
+  width: 100%;
+}
+.navVertical {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.75rem;
+}
+.link {
+  color: var(--xf-accent, inherit);
+  text-decoration: none;
+  font-size: 0.9rem;
+  transition: opacity 0.2s;
+  white-space: nowrap;
+}
+.link:hover {
+  opacity: 0.7;
+}
+.copyright {
+  font-size: 0.75rem;
+  opacity: 0.6;
+  width: 100%;
+  text-align: center;
+}
+
+/* src/components/layout/xseparator/XSeparator.module.css */
+.separatorContainer {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  --x-color: var(--separator-color);
+  --x-bg: white;
+}
+.iconWrapper {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  background-color: var(--x-bg);
+  padding: 0 10px;
+  color: var(--x-color);
+  font-family: system-ui, sans-serif;
+  font-weight: bold;
+  font-size: 1.2rem;
+  line-height: 1;
+  user-select: none;
+}
+.separator {
+  --separator-color: #e2e8f0;
+  --separator-thickness: 1px;
+  --separator-margin: 1rem;
+  border: 0;
+  background-color: var(--separator-color);
+}
+.dashed {
+  background-color: transparent !important;
+  border-bottom: var(--separator-thickness) dashed var(--separator-color);
+}
+.dotted {
+  background-color: transparent !important;
+  border-bottom: var(--separator-thickness) dotted var(--separator-color);
+}
+.faded {
+  mask-image:
+    linear-gradient(
+      to right,
+      transparent,
+      black 20%,
+      black 80%,
+      transparent);
+}
+.vertical.faded {
+  mask-image:
+    linear-gradient(
+      to bottom,
+      transparent,
+      black 20%,
+      black 80%,
+      transparent);
+}
+.horizontal {
+  width: 100%;
+  height: var(--separator-thickness);
+  margin: var(--separator-margin) 0;
+}
+.vertical {
+  width: var(--separator-thickness);
+  height: 100%;
+  display: inline-block;
+  margin: 0 var(--separator-margin);
+  vertical-align: middle;
+}
+
+/* src/components/layout/xzigzaglayout/XZigZagLayout.module.css */
+.layout {
+  width: min(100%, 72rem);
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: var(--x-zigzag-gap, 0.5rem);
+  padding-inline: clamp(0.5rem, 2vw, 1rem);
+  position: relative;
+}
+.svgLine {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 0;
+}
+.item {
+  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+}
+.item > * {
+  width: 100%;
+  text-align: inherit;
+}
+.contentWrapper {
+  width: 100%;
+}
+.textLeft > * {
+  text-align: left;
+}
+.textRight > * {
+  text-align: right;
+}
+.left > * {
+  grid-column: 2 / 8;
+}
+.right > * {
+  grid-column: 6 / 12;
+}
+@media (max-width: 768px) {
+  .left > * {
+    grid-column: 1 / 11;
+  }
+  .right > * {
+    grid-column: 3 / 13;
+  }
+}
+
+/* src/components/content/xinteractivephrase/XInteractivePhrase.module.css */
+.container {
+  padding: 1rem 0;
+  color: var(--text, #000);
+  width: 100%;
+}
+.title {
+  margin: 0;
+  padding: 0;
+  line-height: 1.3;
+  font-weight: inherit;
+  text-align: inherit;
+}
+h1.title {
+  font-size: clamp(2rem, 6vw, 2.2rem);
+  font-weight: 800;
+  margin: 0;
+  padding: 0;
+  text-align: inherit;
+}
+h2.title {
+  font-size: clamp(1.675rem, 4vw, 1.8rem);
+  font-weight: 700;
+  margin: 0;
+  padding: 0;
+  text-align: inherit;
+}
+h3.title {
+  font-size: clamp(1.4rem, 3vw, 1.95rem);
+  font-weight: 700;
+  margin: 0;
+  padding: 0;
+  text-align: inherit;
+}
+h4.title {
+  font-size: clamp(1.25rem, 3vw, 2rem);
+  font-weight: 600;
+  margin: 0;
+  padding: 0;
+  text-align: inherit;
+}
+h5.title {
+  font-size: clamp(1.125rem, 3vw, 1.5rem);
+  font-weight: 600;
+  margin: 0;
+  padding: 0;
+  text-align: inherit;
+}
+h6.title {
+  font-size: clamp(1rem, 2.5vw, 1.25rem);
+  font-weight: 600;
+  margin: 0;
+  padding: 0;
+  text-align: inherit;
+}
+p.title {
+  font-size: 1rem;
+  font-weight: 400;
+  margin: 0;
+  padding: 0;
+  text-align: inherit;
+}
+.title strong {
+  font-weight: 900;
+  color: var(--accent, #0070f3);
+}
+.title em {
+  font-style: italic;
+  font-family: serif;
+}
+.underlineEffect {
+  position: relative;
+  cursor: pointer;
+  color: var(--accent, #0070f3);
+  display: inline-block;
+  transition: color 0.3s ease;
+}
+.underlineEffect::after {
+  content: "";
+  position: absolute;
+  bottom: -2px;
+  left: 0;
+  height: 0.15em;
+  width: 100%;
+  background:
+    repeating-linear-gradient(
+      45deg,
+      transparent,
+      transparent 2px,
+      currentColor 2px,
+      currentColor 4px);
+  transition: opacity 0.3s ease;
+}
+.underlineEffect:hover::after {
+  opacity: 0;
+}
+.buttonEffect {
+  display: inline-block;
+  padding: 0.1em 0.6em;
+  border: 2px dashed currentColor;
+  border-radius: 9999px;
+  cursor: pointer;
+  color: var(--accent, #0070f3);
+  transition: all 0.3s ease;
+}
+.buttonEffect:hover {
+  background: currentColor;
+  color: var(--bg, #fff);
+}
+.blurEffect {
+  display: inline-block;
+  transition: filter 0.7s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.7s ease;
+}
+.isVisible {
+  filter: blur(0);
+  opacity: 1;
+}
+.isHidden {
+  filter: blur(10px);
+  opacity: 0.3;
+  user-select: none;
+}
+.lineBreak {
+  display: block;
+  height: 0.8rem;
+}
+.underlineEffect:focus-visible,
+.buttonEffect:focus-visible {
+  outline: 2px solid var(--accent, #0070f3);
+  outline-offset: 4px;
+}
+
+/* src/components/gallery/xmicrogallerytext/XMicroGalleryText.module.css */
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  width: 100%;
+  align-items: center;
+  margin: 2rem 0;
+}
+@media (min-width: 1024px) {
+  .container {
+    flex-direction: row;
+    align-items: center;
+    gap: 4rem;
+  }
+  .reverse {
+    flex-direction: row-reverse;
+  }
+}
+.textContent {
+  flex: 1;
+  opacity: 0;
+  transform: translateY(30px);
+  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
+  color: var(--foreground);
+}
+.textContent.visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+.textLeft {
+  text-align: left;
+}
+.textRight {
+  text-align: right;
+}
+.textCenter {
+  text-align: center;
+}
+.textContent p,
+.textContent div,
+.textContent span,
+.textContent em,
+.textContent strong,
+.textContent a {
+  text-align: inherit;
+  max-width: none;
+  margin-left: unset;
+  margin-right: unset;
+}
+.gallery {
+  flex: 1.5;
+  width: 100%;
+}
+.artisticGrid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: 380px 220px;
+  gap: 1rem;
+}
+.imageWrapper {
+  position: relative;
+  overflow: hidden;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+  border-radius: 20px;
+  opacity: 0;
+  transform: translateY(50px) scale(0.95);
+  transition:
+    opacity 0.6s ease-out,
+    transform 0.6s ease-out,
+    box-shadow 0.3s ease;
+}
+.imageWrapper.visible {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+}
+.imageWrapper:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
+}
+.previewImage {
+  object-fit: cover;
+}
+.artisticGrid .artistic1 .previewImage {
+  object-position: center top;
+  transform: translateY(0);
+}
+.artistic1 {
+  grid-column: 1 / 4;
+  grid-row: 1 / 2;
+  transition-delay: 0.2s;
+}
+.artistic2 {
+  grid-column: 1 / 2;
+  grid-row: 2 / 3;
+  transition-delay: 0.3s;
+}
+.artistic3 {
+  grid-column: 2 / 4;
+  grid-row: 2 / 3;
+  transition-delay: 0.4s;
+}
+@media (max-width: 768px) {
+  .artisticGrid {
+    grid-template-columns: 1fr;
+    grid-template-rows: 240px 180px 180px;
+  }
+  .artistic1,
+  .artistic2,
+  .artistic3 {
+    grid-column: 1 / 2;
+  }
+  .artistic1 {
+    grid-row: 1 / 2;
+  }
+  .artistic2 {
+    grid-row: 2 / 3;
+  }
+  .artistic3 {
+    grid-row: 3 / 4;
+  }
+}
+@media (max-width: 480px) {
+  .artisticGrid {
+    grid-template-rows: 200px 140px 140px;
+  }
+}
+
+/* src/components/gallery/xstaticgallery/XStaticGallery.module.css */
+.galleryContainer {
+  width: 100%;
+  max-width: 80rem;
+  margin: 0 auto;
+  padding: 1rem 1rem 3rem;
+}
+.galleryTitle {
+  font-size: 1.875rem;
+  text-align: right;
+  color: var(--primary);
+  margin-bottom: 3rem;
+  opacity: 0.8;
+}
+.masonryGrid {
+  gap: 1rem;
+}
+.masonryItem {
+  break-inside: avoid;
+  position: relative;
+  border-radius: 1rem;
+  overflow: hidden;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+  margin-bottom: 1rem;
+  opacity: 0;
+  transform: translateY(20px);
+  transition:
+    opacity 0.5s ease-out,
+    transform 0.5s ease-out,
+    box-shadow 0.3s ease;
+}
+.masonryItem.visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+.masonryItem:hover {
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
+}
+.imageContainer {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  border-radius: 1rem;
+}
+.galleryImage {
+  width: 100%;
+  height: auto;
+  object-fit: cover;
+  display: block;
+  transition: transform 0.5s ease-out;
+}
+.masonryItem:hover .galleryImage {
+  transform: scale(1.05);
+}
+.imageOverlay {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0);
+  transition: background 0.3s ease;
+  pointer-events: none;
+}
+.masonryItem:hover .imageOverlay {
+  background: rgba(0, 0, 0, 0.1);
+}
+.cols1 {
+  columns: 1;
+}
+.cols2 {
+  columns: 2;
+}
+.cols3 {
+  columns: 3;
+}
+.cols4 {
+  columns: 4;
+}
+.cols5 {
+  columns: 5;
+}
+@media (max-width: 1280px) {
+  .cols4,
+  .cols5 {
+    columns: 3;
+  }
+}
+@media (max-width: 768px) {
+  .cols3,
+  .cols4,
+  .cols5 {
+    columns: 2;
+  }
+}
+@media (max-width: 640px) {
+  .cols2,
+  .cols3,
+  .cols4,
+  .cols5 {
+    columns: 1;
+  }
+}
+
+/* src/components/social/xsocialcontact/XSocialContact.module.css */
+.container {
+  --columns: 3;
+  --gap: 1.5rem;
+  --padding: 1.5rem;
+  --text-size: 1rem;
+  --alignment: center;
+  --text-align: center;
+  --icon-gap: 1.5rem;
+  --border-radius: 0.5rem;
+  --bg-color: transparent;
+  --icon-color: currentColor;
+  --icon-hover-color: currentColor;
+  --border-color: transparent;
+  --border-width: 0px;
+  --border-style: solid;
+  --text-color: inherit;
+  display: grid;
+  grid-template-columns: repeat(var(--columns), 1fr);
+  gap: var(--gap);
+  padding: var(--padding);
+  background-color: var(--bg-color);
+  border: var(--border-width) var(--border-style) var(--border-color);
+  border-radius: var(--border-radius);
+  justify-items: var(--alignment);
+}
+.small {
+  --icon-gap: 1rem;
+  --gap: 1rem;
+  --padding: 1rem;
+  --text-size: 0.875rem;
+}
+.medium {
+  --icon-gap: 1.5rem;
+  --gap: 1.5rem;
+  --padding: 1.5rem;
+  --text-size: 1rem;
+}
+.large {
+  --icon-gap: 2rem;
+  --gap: 2rem;
+  --padding: 2rem;
+  --text-size: 1.125rem;
+}
+.rows1 {
+  grid-template-rows: auto;
+}
+.rows2 {
+  grid-template-rows: repeat(2, auto);
+}
+.rows3 {
+  grid-template-rows: repeat(3, auto);
+}
+.rows4 {
+  grid-template-rows: repeat(4, auto);
+}
+.item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: calc(var(--icon-gap) * 0.5);
+  text-decoration: none;
+  transition: opacity 0.2s ease;
+  color: inherit;
+}
+.item:hover {
+  opacity: 0.8;
+}
+.iconWrapper {
+  --item-icon-color: var(--icon-color);
+  --item-icon-hover-color: var(--icon-hover-color);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--icon-gap);
+  height: var(--icon-gap);
+  color: var(--item-icon-color);
+  transition: color 0.2s ease;
+}
+.item:hover .iconWrapper {
+  color: var(--item-icon-hover-color);
+}
+.text {
+  font-size: var(--text-size);
+  color: var(--text-color);
+  text-align: var(--text-align);
+  word-break: break-word;
+  max-width: 100%;
+}
+@media (max-width: 768px) {
+  .container {
+    --columns: 2;
+    --gap: calc(var(--gap) * 0.75);
+    --padding: calc(var(--padding) * 0.75);
+  }
+  .rows2,
+  .rows3,
+  .rows4 {
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: repeat(2, auto);
+  }
+}
+@media (max-width: 480px) {
+  .container {
+    --columns: 1;
+    --gap: calc(var(--gap) * 0.5);
+    --padding: calc(var(--padding) * 0.5);
+  }
+  .rows2,
+  .rows3,
+  .rows4 {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto;
+  }
+}
+/*# sourceMappingURL=index.css.map */