/* ============================================
0. Base
.uled-grid-card

1. Different spans
.uled-grid-card-colspan2
.uled-grid-card-colspan3
.uled-grid-card-colspan4
.uled-grid-card-colspan6
.uled-grid-card-colspan8
.uled-grid-card-rowspan2
 
2. Styles:
.uled-grid-card-dark-style 
.uled-grid-card-light-style

3. Modes:
  .uled-grid-card-switch-image
  .uled-grid-card-video-preview

   ============================================ */


/* =========================================
#  ULED GRID
   ========================================= */

.uled-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: 240px;
  gap: 20px;
}

/* =========================================
#  ULED GRID CARD
   ========================================= */

.uled-grid-card {
  position: relative;
  display: block;
  overflow: hidden;
  text-decoration: none;
  isolation: isolate;

  grid-column: span 3;
}

.uled-grid-card-hero {
  grid-column: span 6;
  grid-row: span 2;
}

.uled-grid-card-colspan8 {
  grid-column: span 8;
}

.uled-grid-card-colspan6 {
  grid-column: span 6;
}

.uled-grid-card-colspan4 {
  grid-column: span 4;
}

.uled-grid-card-colspan3 {
  grid-column: span 3;
}

.uled-grid-card-colspan2 {
  grid-column: span 2;

}

.uled-grid-card-rowspan2 {
  grid-row: span 2;

}

/* =========================================
#  ULED GRID CARD STYLES
   ========================================= */

.uled-grid-card-dark-style, 
.uled-grid-card-light-style {
  border-radius: 30px;
  transform: translateZ(0);
  transition:
    transform .35s ease,
    box-shadow .35s ease;
  filter:
    saturate(.9)
    contrast(1.1);
}

.uled-grid-card-dark-style {
  color: var(--scheme-white-color);
  background: var(--scheme-deepblue-color);
  box-shadow:
    0 18px 46px rgba(var(--scheme-white-rgb), .12),
    inset 0 0 0 1px rgba(var(--scheme-deepblue-rgb), .08);
}

.uled-grid-card-dark-style:nth-child(even) {
}

.uled-grid-card-dark-style:nth-child(odd) {
}

.uled-grid-card-light-style {
  color: var(--scheme-black-color);
  background: var(--scheme-white-color);
  box-shadow:
    0 18px 46px rgba(var(--scheme-deepblue-rgb), .12),
    inset 0 0 0 1px rgba(var(--scheme-white-rgb), .08);
}

.uled-grid-card-light-style:nth-child(even) {
}

.uled-grid-card-light-style:nth-child(odd) {
}


.uled-grid-card-dark-style::before {
}

.uled-grid-card-dark-style::after {
}

.uled-grid-card-light-style::before {
}

.uled-grid-card-light-style::after {
}

/* =========================================
#  ULED GRID CARD WITH SWITCHING IMAGES
   ========================================= */

.uled-grid-card-switch-image::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  transform: scale(1);
  pointer-events: none;
  transition:
    opacity 0.35s ease,
    transform 0.45s ease,
    filter 0.35s ease;
  background:
    linear-gradient(
      0deg,
      rgba(var(--scheme-black-rgb), .80) 0%,
      rgba(var(--scheme-black-rgb), .50) 50%,
      rgba(var(--scheme-black-rgb), .10) 60%,
      rgba(var(--scheme-black-rgb), .00) 100%
    ),
    radial-gradient(circle at 20% 10%, rgba(var(--scheme-blue-rgb), .10), transparent 18%),
    radial-gradient(circle at 85% 20%, rgba(var(--scheme-orange-rgb), .10), transparent 18%),
    var(--image-bg) center center / cover no-repeat;
}

.uled-grid-card-switch-image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  opacity: 0;
  transform: scale(1.04);
  pointer-events: none;
  transition:
    opacity 0.35s ease,
    transform 0.45s ease,
    filter 0.35s ease;
  background:
    linear-gradient(
      0deg,
      rgba(var(--scheme-black-rgb), .80) 0%,
      rgba(var(--scheme-black-rgb), .50) 50%,
      rgba(var(--scheme-black-rgb), .10) 60%,
      rgba(var(--scheme-black-rgb), .00) 100%
    ),
    radial-gradient(circle at 20% 10%, rgba(var(--scheme-blue-rgb), .10), transparent 18%),
    radial-gradient(circle at 85% 20%, rgba(var(--scheme-orange-rgb), .10), transparent 18%),
    var(--image-bg-hover) center center / cover no-repeat;
}

/* ULED GRID CARD SWITCHING IMAGES HOVER */

.uled-grid-card-dark-style:hover:nth-child(even) {
  transform: translateY(-6px);
  border-color: rgba(var(--scheme-orange-rgb), 0.5);
  box-shadow: 0 24px 70px rgba(var(--scheme-orange-rgb), 0.28);
}

.uled-grid-card-dark-style:hover:nth-child(odd)  {
  transform: translateY(-6px);
  border-color: rgba(var(--scheme-orange-rgb), 0.5);
  box-shadow: 0 24px 70px rgba(var(--scheme-white-rgb), 0.28);
}

.uled-grid-card-light-style:hover:nth-child(even) {
  transform: translateY(-6px);
  border-color: rgba(var(--scheme-orange-rgb), 0.5);
  box-shadow: 0 24px 70px rgba(var(--scheme-orange-rgb), 0.28);
}

.uled-grid-card-light-style:hover:nth-child(odd)  {
  transform: translateY(-6px);
  border-color: rgba(var(--scheme-orange-rgb), 0.5);
  box-shadow: 0 24px 70px rgba(var(--scheme-blue-rgb), 0.28);
}

.uled-grid-card:hover::before  {
  opacity: 0;
  transform: scale(1.04);
  filter: saturate(1.06) contrast(1.04);
}

.uled-grid-card:hover::after {
  opacity: 1;
  transform: scale(1);
}


/* =========================================
#  ULED GRID CARD WITH VIDEO STYLES
   ========================================= */

.uled-grid-card-video-preview::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  transform: scale(1);
  pointer-events: none;
  transition:
    opacity 0.35s ease,
    transform 0.45s ease,
    filter 0.35s ease;
  background:
    linear-gradient(
      0deg,
      rgba(var(--scheme-black-rgb), .80) 0%,
      rgba(var(--scheme-black-rgb), .50) 50%,
      rgba(var(--scheme-black-rgb), .10) 60%,
      rgba(var(--scheme-black-rgb), .00) 100%
    ),
    radial-gradient(circle at 20% 10%, rgba(var(--scheme-blue-rgb), .10), transparent 18%),
    radial-gradient(circle at 85% 20%, rgba(var(--scheme-orange-rgb), .10), transparent 18%);
}

.uled-grid-card-video-preview::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  opacity: 0;
  transform: scale(1.04);
  pointer-events: none;
  transition:
    opacity 0.35s ease,
    transform 0.45s ease,
    filter 0.35s ease;
  background:
    linear-gradient(
      0deg,
      rgba(var(--scheme-black-rgb), .80) 0%,
      rgba(var(--scheme-black-rgb), .50) 50%,
      rgba(var(--scheme-black-rgb), .10) 60%,
      rgba(var(--scheme-black-rgb), .00) 100%
    ),
    radial-gradient(circle at 20% 10%, rgba(var(--scheme-blue-rgb), .10), transparent 18%),
    radial-gradient(circle at 85% 20%, rgba(var(--scheme-orange-rgb), .10), transparent 18%);
}

.uled-grid-card-poster,
.uled-grid-card-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.uled-grid-card-poster {
  z-index: 1;
  transition: transform .7s ease;
}

.uled-grid-card-video {
  z-index: 2;
  display: none;
  pointer-events: none;
}

.uled-grid-card.is-video-active .uled-grid-card-video {
  display: block;
}

/* =========================================
#  ULED GRID CARD TEXT STYLES
   ========================================= */

.uled-grid-card-top-default-style {
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: clamp(23px, 2.3vw, 32px);
}

.uled-grid-card-top-left-default-style {
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(var(--scheme-white-rgb), .18);
  border-radius: 50%;
  color: var(--scheme-white-color);
  font-size: clamp(15px, 1.2vw, 25px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: .05em;
  background: rgba(var(--scheme-black-rgb), .75);
  backdrop-filter: blur(12px);
}

.uled-grid-card:hover .uled-grid-card-top-left-default-style {
  font-size: clamp(15px, 1.7vw, 25px);
  font-weight: 950;
  line-height: 1.2;
  letter-spacing: .07em;
  background: rgba(var(--scheme-white-rgb), .75);
}

.uled-grid-card:nth-child(odd) 
.uled-grid-card-top-left-default-style {
  border-color: rgba(var(--scheme-blue-rgb), .5);
  color: var(--scheme-blue-color);
}

.uled-grid-card:nth-child(even) 
.uled-grid-card-top-left-default-style {
  border-color: rgba(var(--scheme-orange-rgb), .5);
  color: var(--scheme-orange-color);
}

.uled-grid-card-top-right-default-style {
  z-index: 5;
  padding: 7px 10px;
  border: 1px solid rgba(var(--scheme-white-rgb), .14);
  border-radius: 999px;
  color: rgba(var(--scheme-white-rgb), .65);
  background: rgba(var(--scheme-black-rgb), .52);
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .11em;
  text-transform: uppercase;
  backdrop-filter: blur(12px);
}

.uled-grid-card-bottom-default-style {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  z-index: 5;
  color: var(--scheme-white-color);
}

.uled-grid-card-bottom-default-style h3 + p::before {
  content: "";
  display: block;
  width: 45px;
  height: 3px;
  margin: 18px 0;
  border-radius: 999px;
  background:
    linear-gradient(90deg, var(--scheme-blue-color), var(--scheme-orange-color));
}


.uled-grid-card-bottom-default-style h3 {
  z-index: 5;
  max-width: 420px;
  margin: 0;
  color: var(--scheme-white-color);
  font-size: clamp(25px, 2.1vw, 34px);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -.035em;
  text-shadow: 0 6px 24px rgba(var(--scheme-black-rgb), .35);
  -webkit-text-stroke: 1.5px var(--scheme-black-color);
  paint-order: stroke fill;
}

.uled-grid-card-bottom-default-style p {
  z-index: 5;
  display: block;
  max-width: 430px;
  margin: 15px 0 0;
  color: rgba(var(--scheme-white-rgb), .62);
  font-weight: 500;
  line-height: 1.68;
}

.uled-grid-card-bottom-default-style span {
  z-index: 5;
}

/* ========================================================
#  ULED GRID
======================================================== */

@media (max-width: 1100px) {
  .uled-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .uled-grid-card {
    grid-column: span 6;
  }

  .uled-grid-card-hero {
    grid-column: span 12;
    grid-row: span 2;
  }

  .uled-grid-card-colspan8 {
    grid-column: span 12;
  }

  .uled-grid-card-colspan6 {
    grid-column: span 6;
  }

  .uled-grid-card-colspan4 {
    grid-column: span 6;
  }

  .uled-grid-card-colspan3 {
    grid-column: span 6;
  }

  .uled-grid-card-colspan2 {
    grid-column: span 4;

  }
}

@media (max-width: 700px) {
  .uled-grid {
    grid-template-columns: 1fr;
  }

  .uled-grid-card {
    min-height: 410px;
  }
}