:root {
  --bg: #000;
  --border: rgba(255, 255, 255, 0.3);
  --text: #000;
  --panel: #fff;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #111;
  font-family: Georgia, "Times New Roman", serif;
}

.mkdf-fullscreen-show-grid-holder {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  vertical-align: middle;
  background-color: var(--bg);
  opacity: 0;
  transition: opacity 0.3s;
}

.mkdf-fsg-holder-inner {
  position: relative;
  z-index: 10;
  font-size: 0;
}

.mkdf-fsg-item {
  position: relative;
  display: inline-block;
  width: 25%;
  vertical-align: top;
  box-sizing: border-box;
  pointer-events: none;
}

.mkdf-fsg-item.mkdf-ready,
.mkdf-fsg-item.touch-ready {
  pointer-events: auto;
}

.mkdf-fsg-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #000;
}

.mkdf-fsg-item.mkdf-fade-out-cover::after {
  animation: mkdfFadeOutCover 1s cubic-bezier(.645, .045, .355, 1) forwards;
}

.mkdf-fsg-item.mkdf-remove-cover::after {
  display: none;
}

.mkdf-fsg-item-inner {
  position: relative;
  display: block;
  z-index: 10;
  height: 100%;
  padding: 16px 21px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  box-sizing: border-box;
}

.mkdf-fsg-item-table {
  display: table;
  width: 100%;
  height: 100%;
}

.mkdf-fsg-item-table-cell {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.mkdf-fsg-item-table-cell-content {
  position: relative;
  display: inline-block;
  width: 70%;
  padding: 16px 10%;
  text-align: left;
  z-index: 1;
}

.mkdf-fsg-item-table-cell-content::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 0;
  background-color: var(--panel);
  transition: width 0.5s cubic-bezier(.78, .11, 0, .84);
  z-index: -1;
}

.mkdf-fsg-item.hovered .mkdf-fsg-item-table-cell-content::after {
  width: 100%;
}

.mkdf-fsgi-link {
  position: absolute;
  inset: 0;
  z-index: 20;
}

.mkdf-sli-title,
.mkdf-categories-holder {
  color: var(--text);
  opacity: 0;
  transition: opacity 0.2s;
}

.mkdf-fsg-item.hovered .mkdf-sli-title,
.mkdf-fsg-item.hovered .mkdf-categories-holder {
  opacity: 1;
  transition: opacity 0.2s 0.2s;
}

.mkdf-sli-title {
  margin: 0;
  font-size: clamp(2.3rem, 3.4vw, 4.5rem);
  line-height: 1;
  letter-spacing: 0.02em;
}

.mkdf-categories-holder {
  display: inline-block;
  margin-top: 12px;
}

.mkdf-categories-icon-holder {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  border-radius: 50%;
  vertical-align: middle;
}

.mkdf-icon-element {
  position: relative;
  left: 1px;
  font-size: 11px;
}

.mkdf-categories-icon-holder svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 19px;
  height: 19px;
  stroke: currentColor;
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  opacity: 0;
  transition: 0.2s;
}

.mkdf-fsg-item.hovered .mkdf-categories-icon-holder svg {
  opacity: 1;
  stroke-dashoffset: 0;
  transition: 0.5s 0.25s;
}

.mkdf-sli-about-holder {
  display: inline-block;
  margin-left: 18px;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3em;
  font-family: Arial, sans-serif;
}

.mkdf-fsg-image-holder {
  position: absolute;
  inset: 0;
  background-color: #e1e1e1;
  z-index: 1;
}

.mkdf-image-url-holder-inner {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0s 0.6s;
  will-change: opacity;
}

.mkdf-image-url-holder-inner.hovered {
  z-index: 10;
  opacity: 1;
  transition: opacity 0.6s;
}

.mkdf-image-url {
  position: relative;
  height: 100%;
  background-position: center;
  background-size: cover;
}

.mkdf-image-url-holder-inner:nth-child(1) .mkdf-image-url { background-image: radial-gradient(circle at 20% 20%, rgba(255,214,153,.55), transparent 28%), linear-gradient(135deg, #5a2a27 0%, #1b1c2d 100%); }
.mkdf-image-url-holder-inner:nth-child(2) .mkdf-image-url { background-image: radial-gradient(circle at 80% 30%, rgba(237,205,132,.42), transparent 22%), linear-gradient(135deg, #12354a 0%, #2f1a29 100%); }
.mkdf-image-url-holder-inner:nth-child(3) .mkdf-image-url { background-image: radial-gradient(circle at 30% 75%, rgba(251,244,183,.35), transparent 24%), linear-gradient(135deg, #3b2343 0%, #0d2d36 100%); }
.mkdf-image-url-holder-inner:nth-child(4) .mkdf-image-url { background-image: radial-gradient(circle at 72% 28%, rgba(255,173,120,.34), transparent 20%), linear-gradient(135deg, #4e2020 0%, #1b2838 100%); }
.mkdf-image-url-holder-inner:nth-child(5) .mkdf-image-url { background-image: radial-gradient(circle at 18% 60%, rgba(173,216,230,.28), transparent 24%), linear-gradient(135deg, #1a2641 0%, #33211e 100%); }
.mkdf-image-url-holder-inner:nth-child(6) .mkdf-image-url { background-image: radial-gradient(circle at 78% 72%, rgba(255,206,160,.32), transparent 21%), linear-gradient(135deg, #25304a 0%, #4a2323 100%); }
.mkdf-image-url-holder-inner:nth-child(7) .mkdf-image-url { background-image: radial-gradient(circle at 44% 24%, rgba(232,193,125,.34), transparent 18%), linear-gradient(135deg, #3f1e36 0%, #1d3036 100%); }
.mkdf-image-url-holder-inner:nth-child(8) .mkdf-image-url { background-image: radial-gradient(circle at 66% 46%, rgba(255,224,178,.3), transparent 19%), linear-gradient(135deg, #4c3320 0%, #1f233f 100%); }
.mkdf-image-url-holder-inner:nth-child(9) .mkdf-image-url { background-image: radial-gradient(circle at 25% 25%, rgba(255,230,188,.35), transparent 22%), linear-gradient(135deg, #4b1f28 0%, #1e3a4f 100%); }
.mkdf-image-url-holder-inner:nth-child(10) .mkdf-image-url { background-image: radial-gradient(circle at 75% 22%, rgba(192,226,255,.24), transparent 18%), linear-gradient(135deg, #20304b 0%, #5b2d1c 100%); }
.mkdf-image-url-holder-inner:nth-child(11) .mkdf-image-url { background-image: radial-gradient(circle at 25% 72%, rgba(250,208,152,.27), transparent 20%), linear-gradient(135deg, #32213d 0%, #23363a 100%); }
.mkdf-image-url-holder-inner:nth-child(12) .mkdf-image-url { background-image: radial-gradient(circle at 62% 40%, rgba(255,240,210,.22), transparent 18%), linear-gradient(135deg, #5e3527 0%, #20253c 100%); }
.mkdf-image-url-holder-inner:nth-child(13) .mkdf-image-url { background-image: radial-gradient(circle at 14% 30%, rgba(255,188,128,.28), transparent 20%), linear-gradient(135deg, #53222c 0%, #1d3444 100%); }
.mkdf-image-url-holder-inner:nth-child(14) .mkdf-image-url { background-image: radial-gradient(circle at 82% 62%, rgba(246,212,141,.28), transparent 21%), linear-gradient(135deg, #263247 0%, #523126 100%); }
.mkdf-image-url-holder-inner:nth-child(15) .mkdf-image-url { background-image: radial-gradient(circle at 40% 18%, rgba(255,255,255,.16), transparent 15%), linear-gradient(135deg, #36213d 0%, #23303d 100%); }
.mkdf-image-url-holder-inner:nth-child(16) .mkdf-image-url { background-image: radial-gradient(circle at 60% 70%, rgba(255,217,168,.28), transparent 18%), linear-gradient(135deg, #4b2d21 0%, #1f2c42 100%); }

.mkdf-image-url::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.35), rgba(0,0,0,.1));
}

@keyframes mkdfFadeOutCover {
  from { opacity: 1; }
  to { opacity: 0; }
}

@media (max-width: 1100px) {
  .mkdf-fsg-item {
    width: 33.33333%;
  }
}

@media (max-width: 760px) {
  .mkdf-fsg-item {
    width: 50%;
  }

  .mkdf-fsg-item-inner {
    padding: 14px;
  }
}

@media (max-width: 520px) {
  .mkdf-fsg-item {
    width: 100%;
  }

  .mkdf-sli-title {
    font-size: 2rem;
  }
}