#fw-section-recent-videos-beb8a0b3-33a6-47ad-82cd-8f4e504ff114 {

/* ============================================
   YOUTUBE VIDEOS SECTION — Custom CSS
   Go to: Layout > YouTube Videos section > Custom CSS
   Paste this there.
   ============================================ */

/* Section container */
.recent-videos {
  background: #0c0c0f !important;
  position: relative !important;
  overflow: hidden !important;
  padding: 80px 0 !important;
}

/* Background watermark text */
.recent-videos::before {
  content: 'WATCH';
  position: absolute;
  top: 50%;
  left: -40px;
  transform: translateY(-50%);
  font-family: 'Dela Gothic One', sans-serif;
  font-size: 280px;
  color: rgba(255, 92, 26, .02);
  pointer-events: none;
  line-height: 1;
}

.recent-videos .container {
  max-width: 1400px !important;
  padding: 0 60px !important;
}

/* Section label */
.recent-videos__header {
  text-align: left !important;
  margin-bottom: 36px !important;
}

.recent-videos__header::before {
  content: 'Latest From UD';
  display: block !important;
  font-family: 'Space Mono', monospace !important;
  font-size: 10px !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: #ff5c1a !important;
  margin-bottom: 12px !important;
}

/* Section title */
.section-header {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}

.section-header__heading {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-weight: 900 !important;
  font-style: italic !important;
  font-size: clamp(38px, 5.5vw, 68px) !important;
  letter-spacing: -1px !important;
  text-transform: uppercase !important;
  line-height: .92 !important;
  margin-bottom: 0 !important;
  color: #f0ede8 !important;
  -webkit-text-fill-color: #f0ede8 !important;
  background: none !important;
}

/* Hide CTA buttons */
.section-header__cta,
.recent-videos__cta-container {
  display: none !important;
}

/* Video grid */
.recent-videos .col-grid {
  display: grid !important;
  gap: 16px !important;
  background: transparent !important;
  border: none !important;
  align-items: stretch !important;
}

/* Video cards */
.recent-videos .col-grid > div {
  background: #1a1a1f !important;
  border: 2px solid rgba(255, 255, 255, .06) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  transition: all .4s cubic-bezier(.16, 1, .3, 1) !important;
}

.recent-videos .col-grid > div:hover {
  border-color: #ff5c1a !important;
  transform: translateY(-6px) rotate(-.3deg) !important;
  box-shadow: 0 16px 48px rgba(255, 92, 26, .15) !important;
  z-index: 2 !important;
  position: relative !important;
}

/* Tile structure */
.video-tile {
  background: transparent !important;
  border-radius: 0 !important;
  flex: 1 !important;
}

.video-tile__link {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  text-decoration: none !important;
}

/* Thumbnail */
.video-tile__image-container {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 12px 12px 0 0 !important;
}

.video-tile__image-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, .3) !important;
  transition: background .3s !important;
  z-index: 1 !important;
}

.recent-videos .col-grid > div:hover .video-tile__image-overlay {
  background: rgba(0, 0, 0, .1) !important;
}

.image__image {
  display: block !important;
  width: 100% !important;
  transition: transform .5s cubic-bezier(.16, 1, .3, 1) !important;
}

.recent-videos .col-grid > div:hover .image__image {
  transform: scale(1.05) !important;
}

/* Play button */
.video-tile__icon {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 48px !important;
  height: 48px !important;
  background: linear-gradient(135deg, #ff5c1a, #cc1a00) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 2 !important;
  box-shadow: 0 0 18px rgba(255, 92, 26, .4) !important;
  transition: transform .3s, box-shadow .3s !important;
}

.video-tile__icon::after {
  content: '' !important;
  display: block !important;
  width: 0 !important;
  height: 0 !important;
  border-top: 6px solid transparent !important;
  border-bottom: 6px solid transparent !important;
  border-left: 11px solid #fff !important;
  margin-left: 2px !important;
}

.recent-videos .col-grid > div:hover .video-tile__icon {
  transform: translate(-50%, -50%) scale(1.15) !important;
  box-shadow: 0 0 32px rgba(255, 92, 26, .7) !important;
}

.video-tile__icon-image {
  display: none !important;
}

/* Video title area */
.video-tile__caption {
  padding: 18px 20px !important;
  background: #1a1a1f !important;
  border-top: 1px solid rgba(255, 255, 255, .06) !important;
  flex: 1 !important;
}

.video-tile__title {
  font-family: 'Dela Gothic One', sans-serif !important;
  font-size: 14px !important;
  color: #f0ede8 !important;
  text-transform: uppercase !important;
  line-height: 1.25 !important;
  letter-spacing: .5px !important;
}

.recent-videos .col-grid > div:hover .video-tile__title {
  color: #ff5c1a !important;
}

/* Mobile */
@media (max-width: 900px) {
  .recent-videos .container { padding: 0 24px !important; }
  .recent-videos { padding: 60px 0 !important; }
}
}




#fw-section-header {

/* ============================================
   FOURTHWALL NATIVE HEADER — Custom CSS
   Go to: Layout > Header > Custom CSS
   
   Hides native nav on landing page (where our
   custom .nav exists). Shows on all other pages.
   ============================================ */

body:has(.nav) .header__grid {
  display: none !important;
}
}