:root {
  --card-gap: clamp(16px, 3vw, 48px);
  --cards-per-view: 3;
  --catalog-padding-inline: clamp(16px, 4vw, var(--side-margins));
  --font: "Geist Variable", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body {
  margin: 0;
  font-family: var(--font);
  font-weight: 200;
  color: var(--color-three);
  background: var(--background-main);
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
  display: flex;
  padding: 0;
  min-height: 0;
}

h2 {
  font-weight: bold;
  font-family: var(--font);
  padding: 20px;
  text-align: left;
  align-self: flex-start;
}

h3 {
  font-weight: bold;
  font-family: var(--font);
  margin: 0;
  padding: 0px 20px;
}

h3slide {
  font-weight: 200;
  font-family: var(--font);
  margin: 0;
  padding: 0px 20px;
  text-justify: left;
  text-align: top;
}

h3d {
  font-weight: 200;
  font-family: var(--font);
  margin: 0;
  padding: 0px 20px;
  text-align: left;
}

p {
  justify-content: center;
  align-content: center;
  padding: 4px 20px;
  font-weight: 50;
  font-size: small;
}

.project-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-weight: 200;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: opacity 150ms ease;
}

.project-link:hover,
.project-link:focus-visible {
  opacity: 0.7;
}

pCaption {
  justify-content: center;
  text-align: bottom;
  padding: 4px 0px;
  font-weight: 50;
  font-size: small;
}

pI{
  justify-content: center;
  align-content: center;
  padding: 4px 0px;
  font-weight: 50;
  font-size: small;
}

.slider {
  position: relative;
  flex: 1;
  width: 100%;
  --slider-chrome-offset: calc((var(--header-footer-height) * 2) + env(safe-area-inset-bottom, 0px));
  --slider-viewport-size: calc(100vh - var(--slider-chrome-offset));
  height: var(--slider-viewport-size);
  min-height: var(--slider-viewport-size);
  display: flex;
  justify-content: center;
  align-items: center;
}

@supports (height: 100dvh) {
  .slider {
    --slider-viewport-size: calc(100dvh - var(--slider-chrome-offset));
  }
}

@supports (height: 100svh) {
  .slider {
    --slider-viewport-size: min(
      calc(100dvh - var(--slider-chrome-offset)),
      calc(100svh - var(--slider-chrome-offset))
    );
  }
}

.slide-container {
  --card-max-height: var(--slider-viewport-size);
  --card-available-width: calc(
    (
      100%
      - (var(--cards-per-view) - 1) * var(--card-gap)
      - (var(--catalog-padding-inline) * 2)
    ) / var(--cards-per-view)
  );
  --card-width: min(
    var(--mobile),
    var(--card-available-width),
    calc(var(--card-max-height) * 3 / 4)
  );
  height: var(--card-max-height);
  display: flex;
  gap: var(--card-gap);
  padding-block: 12px;
  padding-inline: var(--catalog-padding-inline);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  align-items: center;
}

.slide-container::-webkit-scrollbar {
  display: none;
}

.slide {
  position: relative;
  flex: 0 0 var(--card-width, 280px);
  width: var(--card-width, 280px);
  max-height: var(--card-max-height, calc(100dvh - 120px));
  color: inherit;
  text-decoration: none;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: none;
  overflow: hidden;
  overflow-wrap: anywhere;
  justify-content: center;
  align-items: flex-start;
  aspect-ratio: 3 / 4;
}

.slideTitle {
  position: relative;
  flex: 0 0 var(--card-width, 280px);
  width: var(--card-width, 280px);
  max-height: var(--card-max-height, calc(100dvh - 120px));
  color: inherit;
  text-decoration: none;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: none;
  overflow: hidden;
  overflow-wrap: anywhere;
  justify-content: center;
  align-items: flex-start;
  aspect-ratio: 3 / 4;
}

.slideEmpty {
  position: relative;
  flex: 0 0 var(--card-width, 280px);
  width: var(--card-width, 280px);
  max-height: var(--card-max-height, calc(100dvh - 120px));
  scroll-snap-align: start;
  background: none;
  pointer-events: none;
  aspect-ratio: 3 / 4;
}

.slideBlack {
  position: relative;
  flex: 0 0 var(--card-width, 280px);
  width: var(--card-width, 280px);
  height: 400px;
  color: inherit;
  text-decoration: none;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: #0f0f0f;
  overflow: hidden;
  overflow-wrap: anywhere;
  justify-content: center;
  align-items: flex-start;
  aspect-ratio: 3 / 4;
}

.slide-container > .slide:first-child {
  justify-content: flex-start;
  align-items: flex-start;
  gap: clamp(12px, 2vh, 28px);
}

.slide-container > .slide:first-child h3 {
  margin: 0;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.slide-container > .slide:first-child p {
  margin: 0;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  margin-top: auto;
}


.slideimg{
  width: 80%;
  height: auto;
  display: block;
  object-fit: contain;
}

.slideimgborder{
  width: 80%;
  border: 1px #2a2a2a;
}

.slide img.hero {
  width: 100%;
  object-fit: cover;
  display: block;
}

@media (min-width: 1200px) {
  .slide-container {
    --cards-per-view: 3;
  }
}

@media (min-width: 641px) {
  .slide--media {
    --caption-reserved-height: clamp(56px, 6vw, 120px);
    --slide-media-padding: clamp(12px, 2vh, 28px);
    flex: 0 0 auto;
    width: max-content;
    max-width: 80%;
    min-width: var(--card-width, 280px);
    max-height: var(--card-max-height, calc(100dvh - 120px));
    height: 100%;
    aspect-ratio: auto;
    justify-content: center;
    align-items: center;
    gap: clamp(12px, 2vh, 28px);
    padding-block: var(--slide-media-padding);
    box-sizing: border-box;
    overflow: visible;
  }

  .slide--media .slideimg {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: max(
      0px,
      calc(
        var(--card-max-height, calc(100dvh - 120px))
        - var(--caption-reserved-height)
        - (var(--slide-media-padding) * 2)
      )
    );
  }

  .slide--media pCaption {
    display: block;
    width: 100%;
    margin: 0 auto;
    text-align: center;
  }
}


@media (max-width: 1000px) {
  .slide-container {
    --cards-per-view: 2;
  }
}

@media (max-width: 640px) {
  .slide-container {
    --card-gap: max(48px, 8vw);
    --cards-per-view: 1;
    --card-width: min(
      calc(100vw - 48px),
      calc(var(--card-max-height) * 3 / 4)
    );
    --slide-mobile-side-padding: max(24px, calc((100vw - var(--card-width)) / 2));
    --catalog-padding-inline: var(--slide-mobile-side-padding);
    padding-inline: var(--slide-mobile-side-padding);
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--slide-mobile-side-padding);
    align-items: stretch;
  }

  .slide {
    scroll-snap-align: center;
    scroll-snap-stop: always;
    justify-content: center;
    align-content: center;
    padding: 4px 0 0 0;
  }

  .slideBlack {
    padding: clamp(24px, 8vw, 36px);
    border-radius: 20px;
  }

  .slide img.hero {
    border-radius: 20px;
  }

  .slideimg{
    align-self: center;
    width: 100%;
  }
  pCaption{
    align-self: center;
  }

  .slideTitle {
    align-items: center;
  }

  .slideTitle > h2,
  .slideTitle > h3d {
    align-self: flex-start;
    text-align: left;
  }

  .slideEmpty {
    display: none;
  }

}