/* ==========================================================================
   1. VARIABLES (:root)
   ========================================================================== */
:root {
  /* Layout Adjustments */
  --main-adjusting: 320;
  --main-adjuster: 100vw;
  --player-width: calc(var(--main-adjuster) * (340/400));
  
  /* Theme Colors */
  --primary: #ffd70a;
  --secondary: #e20916;

  --light-bg: white;
  --light-color: #222;
  --dark-bg: #101010;
  --dark-color: #aaa;
  --thumb-color: var(--ceu);
  --item-color: grey;

  /* Basic Colors */
  --ver: #ff0000;
  --rosa: #ff006c;
  --roxo: #da00ff;
  --vio: #8a00ff;
  --azul: #0600ff;
  --ceu: #007eff;
  --mar: #00fff6;
  --verde: #1eff00;
  --nature: #00ff5a;
  --limao: #beff00;
  --sol: #ffc600;
  --lara: #ff6c00;
  --tura: #ff3600;
  --terra: #c04d00;
  --choco: #3f0800;
  --leijo: #00334d;
  --cinza: #c8c8c8;
  --preto: #000;

  /* Brand / Social Colors */
  --face-mess: #1877f2;
  --face: #3b5998;
  --twitter: #1da1f2;
  --twi1: #14171a;
  --twi2: #aab8c2;
  --twi3: #e1e8ed;
  --twi4: #f5f8fa;
  --youtube: #ff0000;
  --you1: #282828;
  --insta: linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5);
  --insta1: #feda75;
  --insta2: #fa7e1e;
  --insta3: #d62976;
  --insta4: #962fbf;
  --insta5: #4f5bd5;
  --pin: #bd081c;
  --in: #007bb5;
  --goo1: #4285f4;
  --goo2: #ea4335;
  --goo3: #34a853;
  --goo4: #fbbc05;
  --snap: #fffc00;
  --sap: #25d366;
  --sap1: #075e54;
  --sap2: #128c7e;
  --sap3: #dcf8c6;
  --sap4: #34b7f1;
  --tumblr: #2c4762;
  --reddit: #ff5700;
  --red1: #cee3f8;
  --red2: #336699;
  --red3: #5f99cf;
  --red4: #ff5700;
  --mastodon: #2b90d9;
  --masto1: #282c37;
  --masto2: #9baec8;
  --masto3: #d9e1e8;
  --spot: #1ed760;
  --spot1: #1db954;
  --apple: #a6b1b7;
  --ap1: #333333;
  --ap2: #bbbbbb;
  --amazon: #ff9900;
  --micro1: #f35022;
  --micro2: #80bb03;
  --micro3: #03a5f0;
  --micro4: #ffb903;
  --periscope: #40a4c4;
  --peri1: #d55548;
  --peri2: #7cd6f1;
  --peri3: #3f4d51;
  --peri4: #a4b8be;
  --4s: #f94877;
  --4s1: #073282;
  --4s2: #2d5be3;
  --swarm: #ffa633;
  --swarm1: #f06d1b;
  --swarm2: #ffa71c;
  --swarm3: #2182eb;
  --medium: #02b875;
  --med1: #e8f3ec;
  --med2: #00ab6b;
  --med3: #12100e;
  --vimeo: #1ab7ea;
  --vim1: #162221;
  --skype: #00aff0;
  --sky: #0078d7;
  --android: #a4c639;
  --quora: #aa2200;
  --quora1: #2b6dad;
  --drib: #ea4c89;
  --drib1: #c32361;
  --drib2: #444444;
  --drib3: #9ba5a8;
  --slack: #4a154b; 
  --slack1: #36c5f0;
  --slack2: #2eb67d;
  --slack3: #e01e5a;
  --slack4: #ecb22e;
  --stumb: #e94826;
  --stumb1: #e4e5e7;
  --flickr: #f40083;
  --flickr1: #006add;
  --flickr2: #177fff;
  --flickr3: #246dd6;
  --flickr4: #ff1981;
  --yahoo: #430297;
  --yah1: #500095;
  --yah2: #2d1152;
  --yah3: #3b009d;
  --yah4: #38027c;
  --twitch: #6441a4;
  --twitch1: #b9a3e3;
  --twitch2: #b9a3e3;
  --twitch3: #292929;
  --sound: #ff5500;
  --sound1: #ff7700;
  --sound2: #ff3300;
  --devian: #05cc47;
  --devian1: #1f3626;
  --devian2: #42704f;
  --devian3: #4dc47d;
  --devian4: #d4f5de;
  --pocket: #ee4056;
  --pock1: #42b7b0;
  --pock2: #9bcfcc;
  --pock3: #83edb8;
  --pock4: #fcb643;
  --ss1: #e68523;
  --ss2: #00a0dc;
  --ss3: #0077b5;
  --500px: #0099e5;
  --px1: #222222;
  --vk: #4a76a8;
  --vk1: #5181b8;
  --vk2: #2a5885;
  --vk3: #edeef0;
  --vk4: #f7f8fa;
  --steam: #171a21;
  --steam1: #66c0f4;
  --steam2: #1b2838;
  --steam3: #2a475e;
  --steam4: #c7d5e0;
  --discord: #7289da;
  --dis1: #99aab5;
  --dis2: #2c2f33;
  --dis3: #23272a;
  --telegram: #0088cc;
  --clarity: #61bed9;
  --listly: #df6d46;
  --list1: #52b1b3;
  --list2: #ce4f24;
  --list3: #333333;
  --list4: #409092;
  --list5: #222222;
  --gmail: #db4437;
  --vine: #00b489;

  /* Metals & Elements */
  --ouro: #ffe400;
  --prata: #f0f0f0;
  --bronze: #e46600;
  --platina: #e0e0e0;
  --ferro: #e6e6e6;
  --fogo: #ff6000;
  
  font-size: calc(var(--main-adjuster) * (20/400));
  line-height: 1.05;
}

/* ==========================================================================
   2. TYPOGRAPHY & TEXT STYLES
   ========================================================================== */
.raleway { font-family: "Raleway", serif; }
.montserrat { font-family: "Montserrat", serif; }
.helvetica { font-family: 'URWRegular', "Helvetica", serif; }

.texto-mozabeatz { 
  background: linear-gradient(-45deg, var(--primary), var(--secondary)); 
  color: transparent; 
  background-size: cover; 
  background-clip: text;
  -webkit-background-clip: text;
}

.texto-premium { 
  background: linear-gradient(-45deg, var(--primary), var(--secondary));
  color: transparent; 
  background-size: cover; 
  background-clip: text;
  -webkit-background-clip: text;
}

.texto-pro { 
  background: linear-gradient(45deg, var(--primary), var(--secondary));
  color: transparent; 
  background-size: cover; 
  background-clip: text;
  -webkit-background-clip: text;
}

/* Brand Text Colors */
.texto-mPesa { color: #ed1c24; }
.texto-mKesh { color: #fac910; }
.texto-eMola { color: #f37227; }
.texto-ponto24 { color: #8a00ff; }

/* Backgrounds */
.fundo-mozabeatz { background: var(--mb) !important; }
.fundo-mozabeatz1 { background: var(--mb1) !important; }
.fundo-mozabeatz2 { background: var(--mb2) !important; }
.fundo-mozabeatz3 { background: var(--mb3) !important; }

.fundo-mPesa { background: #ed1c24; }
.fundo-mKesh { background: #fac910; }
.fundo-eMola { background: #f37227; }
.fundo-ponto24 { background: #8a00ff; }

.fundo-vermelho { background: var(--ver); }
.fundo-rosa { background: var(--rosa); }
.fundo-roxo { background: var(--roxo); }
.fundo-violeta { background: var(--vio); }
.fundo-ceu { background: var(--ceu); }

/* Borders */
.borda-mPesa { border-color: #ed1c24; }
.borda-mKesh { border-color: #fac910; }
.borda-eMola { border-color: #f37227; }
.borda-ponto24 { border-color: #8a00ff; }

/* ==========================================================================
   3. GLOBAL ELEMENTS & RESETS
   ========================================================================== */
::-webkit-scrollbar { width: 0; height: 0; display: none; }
::-webkit-scrollbar-track { width: 0; height: 0; }
::-webkit-scrollbar-thumb { width: 0; height: 0; }
::-webkit-scrollbar-thumb:hover { width: 0; height: 0; }

* {
  scrollbar-width: none;
  border-color: transparent;
  font-family: URWRegular;
  box-sizing: border-box;
  margin: 0;
  color: #aaa;
  -webkit-tap-highlight-color: transparent;
  word-wrap: break-word;
  word-break: break-word;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-overflow-scrolling: touch;
}

html, body {
  height: 100%;
  width: 100vw;
  overflow: hidden;
  background: #171717;
}

main {
  --player-width: 100vw;
  width: 100%;
  height: 100%;
  position: fixed;
  left: calc(50% - (var(--player-width) / 2));
  top: 0;
  background: #171717;
  border-radius: 0;
  padding: calc(var(--main-adjuster) * (16/400));
  overflow: hidden;
}

a { scroll-margin-top: calc(calc(var(--main-adjuster) * (80/400)) + 5em); }
img { object-fit: cover; margin: 0; padding: 0; }
sup { font-size: calc(var(--main-adjuster) * (10/400)); }
button { padding: 0; position: relative; cursor: pointer; }

button:not([class*="lg-icon"]):after {
  content: "";
  top: -10%; left: -10%; right: -10%; bottom: -10%;
  display: flex;
  position: absolute;
  cursor: pointer;
}

select{
  & option:first-child{
    display: none;
  }
}

/* Form Elements */
input[type="color"]:focus { box-shadow: none; }
input[type="color"]::-webkit-color-swatch {
  margin: 0; border: none; border-radius: inherit; outline: none; height: calc(var(--main-adjuster) * (40/400));
}
input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0; border-radius: inherit; border: none; outline: none; height: calc(var(--main-adjuster) * (40/400));
}
input[type="color"]::-moz-color-swatch {
  margin: 0; width: 100%; height: 100%; padding: 0; border: none;
}
input[type="color"]::-moz-focus-inner {
  padding: 0; margin: 0; border: none; height: calc(var(--main-adjuster) * (40/400));
}

input[type="checkbox"] {
  appearance: none;
  position: relative;
  background: transparent;
  border: calc(var(--main-adjuster) * (1/400)) solid white;
  border-radius: calc(var(--main-adjuster) * (2/400));
}
input[type="checkbox"]:checked { border-color: var(--ceu); }
input[type="checkbox"]:checked:after {
  content: "";
  position: absolute;
  left: calc(var(--main-adjuster) * (3/400));
  top: calc(var(--main-adjuster) * (3/400));
  width: calc(100% - calc(var(--main-adjuster) * (6/400)));
  height: calc(100% - calc(var(--main-adjuster) * (6/400)));
  background: var(--ceu);
}

.line-clamp {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

/* ==========================================================================
   4. ANIMATIONS & LOADERS
   ========================================================================== */
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }

@keyframes line-scale-pulse-out-rapid {
  0% { transform: scaleY(1); }
  80% { transform: scaleY(0.3); }
  90% { transform: scaleY(1); } 
}

.loader-container {
  height: calc(var(--main-adjuster) * (100/400));
  display: flex;
  align-items: center;
  justify-content: center;
}

.loader-3 {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  height: 100%;
}
.loader-3 > div {
  width: calc(var(--main-adjuster) * (1/400));
  height: 90%;
  border-radius: calc(var(--main-adjuster) * (1/400));
  margin: 0 calc(var(--main-adjuster) * (2/400));
  animation-fill-mode: both;
  display: inline-block;
  vertical-align: middle;
  animation: line-scale-pulse-out-rapid 0.9s -0.5s infinite cubic-bezier(0.11, 0.49, 0.38, 0.78); 
}
.loader-3 > div:nth-child(2), .loader-3 > div:nth-child(4) { animation-delay: -0.25s !important; }
.loader-3 > div:nth-child(1), .loader-3 > div:nth-child(5) { animation-delay: 0s !important; }

/* ==========================================================================
   5. NESTED GRIDS & MASONRY LAYOUTS
   ========================================================================== */
.grid-set-container {
  display: grid;
  grid-template-columns: repeat(3, calc(var(--main-adjuster) * (150/400)));
  grid-template-rows: repeat(3, calc(var(--main-adjuster) * (150/400)));
  gap: calc(var(--main-adjuster) * (6/400));
  margin: calc(var(--main-adjuster) * (3/400));
  overflow: hidden;

  .ete-main & {
    grid-template-columns: repeat(3, calc(var(--main-adjuster) * (90/400)));
    grid-template-rows: repeat(3, calc(var(--main-adjuster) * (90/400)));
    gap: calc(var(--main-adjuster) * (0/400));
  }

  &.mansory-6-6-1,
  &.mansory-6-6-2,
  &.mansory-6-6-3,
  &.mansory-6-6-4,
  &[class*="mansory-6-6"] {
    min-width: calc(var(--main-adjuster) * (460/400));
    width: calc(var(--main-adjuster) * (460/400));

    .ete-main & {
      min-width: calc(var(--main-adjuster) * (270/400));
      width: calc(var(--main-adjuster) * (270/400));
      margin: 0;
      position: absolute;
      box-sizing: border-box;
      contain: strict;
      opacity: 0;
      pointer-events: auto;
      cursor: pointer;

      &.visible { transition-delay: 0s; opacity: 1; }
      & .explore-grid-item:active {
         transition-delay: 0s;
         transition: 0s;
         transform: scale(0.95);
      }
      & .explore-grid-item { border-radius: 0; }
    }
  }

  &[class*="mansory-4-4"] {
    min-width: calc(var(--main-adjuster) * (300/400));
    width: calc(var(--main-adjuster) * (300/400));
    grid-template-columns: repeat(2, calc(var(--main-adjuster) * (150/400)));
    grid-template-rows: repeat(2, calc(var(--main-adjuster) * (150/400)));
  }

  &[class*="mansory-4-6"] {
    min-width: calc(var(--main-adjuster) * (460/400));
    width: calc(var(--main-adjuster) * (460/400));
    grid-template-columns: repeat(3, calc(var(--main-adjuster) * (150/400)));
    grid-template-rows: repeat(2, calc(var(--main-adjuster) * (150/400)));
  }
}

.grid-set-item {
  background: #333;
  display: flex;
  justify-content: center;
  align-items: center;
  color: black;
  overflow: hidden;

  & img {
    width: 100%;
    height: 100%;
  }

  /* Grid Row Span 2 Combinations */
  .mansory-4-4-1 &:nth-child(1),
  .mansory-4-4-1-1 &:nth-child(2),
  .mansory-4-4-2-2 &:nth-child(1),
  .mansory-4-4-2-2 &:nth-child(2),
  .mansory-4-6-2 &:nth-child(1),
  .mansory-4-6-2 &:nth-child(3),
  .mansory-4-6-2-1 &:nth-child(2),
  .mansory-4-6-2-2 &:nth-child(1),
  .mansory-4-6-2-3 &:nth-child(3),
  .mansory-4-6-3 &:nth-child(1),
  .mansory-4-6-3-1 &:nth-child(2),
  .mansory-4-6-4 &:nth-child(1),
  .mansory-4-6-4-1 &:nth-child(3),
  .mansory-4-6-4-2 &:nth-child(2),
  .mansory-4-6-4-3 &:nth-child(1),
  .mansory-6-6-1 &:nth-child(1),
  .mansory-6-6-1 &:nth-child(4),
  .mansory-6-6-1-1 &:nth-child(2),
  .mansory-6-6-1-1 &:nth-child(3),
  .mansory-6-6-1-2 &:nth-child(1),
  .mansory-6-6-1-2 &:nth-child(4),
  .mansory-6-6-2 &:nth-child(1),
  .mansory-6-6-2-1 &:nth-child(3),
  .mansory-6-6-2-2 &:nth-child(5),
  .mansory-6-6-2-3 &:nth-child(3),
  .mansory-6-6-3-1 &:nth-child(1),
  .mansory-6-6-3-1 &:nth-child(5),
  .mansory-6-6-3-2 &:nth-child(3),
  .mansory-6-6-3-2 &:nth-child(4),
  .mansory-6-6-4 &:nth-child(3),
  .mansory-6-6-4-1 &:nth-child(1),
  .mansory-6-6-4-2 &:nth-child(3),
  .mansory-6-6-4-3 &:nth-child(3),
  .mansory-6-6-5 &:nth-child(1),
  .mansory-6-6-5-1 &:nth-child(1),
  .mansory-6-6-6-1 &:nth-child(1),
  .mansory-6-6-7 &:nth-child(1),
  .mansory-6-6-7 &:nth-child(3),
  .mansory-6-6-7 &:nth-child(4),
  .mansory-6-6-7-2 &:nth-child(2),
  .mansory-6-6-7-2 &:nth-child(4),
  .mansory-6-6-7-2 &:nth-child(5) {
    grid-row: span 2;

    & .grid-item-details {
      display: none;
      justify-content: flex-end;
      background: linear-gradient(270deg, black, transparent);

      & .grid-item-title {
         height: 100%; width: auto; color: white; -webkit-line-clamp: 2;
         font-size: calc(var(--main-adjuster) * (20/400));
         writing-mode: sideways-lr;
         .explore-grid-item & { font-size: calc(var(--main-adjuster) * (16/400)); }
      }
      & .grid-item-name {
         display: none; height: 100%; width: auto; color: #ddd;
         font-size: calc(var(--main-adjuster) * (14/400));
         margin-top: 0; writing-mode: sideways-lr;
         .explore-grid-item & { font-size: calc(var(--main-adjuster) * (14/400)); }
      }
    }
    &.grid-genre-title * { font-size: calc(var(--main-adjuster) * (28/400)) !important; }
  }

  /* Grid Column Span 2 Combinations */
  .mansory-4-4-1-2 &:nth-child(1),
  .mansory-4-4-1-3 &:nth-child(3),
  .mansory-4-4-2-1 &:nth-child(1),
  .mansory-4-4-2-1 &:nth-child(2),
  .mansory-4-6-1-2 &:nth-child(2),
  .mansory-4-6-1-2 &:nth-child(3),
  .mansory-4-6-1-3 &:nth-child(1),
  .mansory-4-6-1-3 &:nth-child(4),
  .mansory-4-6-3 &:nth-child(2),
  .mansory-4-6-3 &:nth-child(3),
  .mansory-4-6-3-1 &:nth-child(1),
  .mansory-4-6-3-1 &:nth-child(3),
  .mansory-4-6-4 &:nth-child(4),
  .mansory-4-6-4-1 &:nth-child(4),
  .mansory-4-6-4-2 &:nth-child(1),
  .mansory-4-6-4-3 &:nth-child(2),
  .mansory-6-6-1 &:nth-child(2),
  .mansory-6-6-1 &:nth-child(5),
  .mansory-6-6-1-1 &:nth-child(1),
  .mansory-6-6-1-1 &:nth-child(5),
  .mansory-6-6-1-3 &:nth-child(1),
  .mansory-6-6-1-3 &:nth-child(5),
  .mansory-6-6-2 &:nth-child(7),
  .mansory-6-6-2-1 &:nth-child(6),
  .mansory-6-6-2-2 &:nth-child(1),
  .mansory-6-6-2-3 &:nth-child(2),
  .mansory-6-6-3 &:nth-child(2),
  .mansory-6-6-3 &:nth-child(6),
  .mansory-6-6-3-3 &:nth-child(1),
  .mansory-6-6-3-3 &:nth-child(7),
  .mansory-6-6-5 &:nth-child(2),
  .mansory-6-6-5 &:nth-child(5),
  .mansory-6-6-5-1 &:nth-child(2),
  .mansory-6-6-5-1 &:nth-child(3),
  .mansory-6-6-5-1 &:nth-child(4),
  .mansory-6-6-6-2 &:nth-child(1),
  .mansory-6-6-7-1 &:nth-child(1),
  .mansory-6-6-7-1 &:nth-child(4),
  .mansory-6-6-7-1 &:nth-child(5),
  .mansory-6-6-7-3 &:nth-child(2),
  .mansory-6-6-7-3 &:nth-child(3),
  .mansory-6-6-7-3 &:nth-child(6) {
    grid-column: span 2;
    &.grid-genre-title * { font-size: calc(var(--main-adjuster) * (28/400)) !important; }
  }

  /* Grid Column & Row Span 2 Combinations */
  .mansory-4-4-2-3 &:nth-child(1),
  .mansory-4-6-3-2 &:nth-child(1),
  .mansory-4-6-3-3 &:nth-child(2),
  .mansory-6-6-4 &:nth-child(1),
  .mansory-6-6-4-1 &:nth-child(4),
  .mansory-6-6-4-2 &:nth-child(2),
  .mansory-6-6-4-3 &:nth-child(4),
  .mansory-6-6-6 &:nth-child(1),
  .mansory-6-6-6-3 &:nth-child(5) {
    grid-column: span 2;
    grid-row: span 2;
    &.grid-genre-title * { font-size: calc(var(--main-adjuster) * (28/400)) !important; }
  }

  /* Grid Row Span 3 Combinations */
  .mansory-6-6-1-2 &:nth-child(2),
  .mansory-6-6-5-3 &:nth-child(1),
  .mansory-6-6-5-3 &:nth-child(3),
  .mansory-6-6-6-2 &:nth-child(1) {
    grid-row: span 3;

    & .grid-item-details {
      display: none;
      justify-content: flex-end;
      background: linear-gradient(270deg, black, transparent);

      & .grid-item-title {
         height: 100%; width: auto; color: white; -webkit-line-clamp: 2;
         font-size: calc(var(--main-adjuster) * (20/400));
         writing-mode: sideways-lr;
         .explore-grid-item & { font-size: calc(var(--main-adjuster) * (16/400)); }
      }
      & .grid-item-name {
         display: none; height: 100%; width: auto; color: #ddd;
         font-size: calc(var(--main-adjuster) * (14/400));
         margin-top: 0; writing-mode: sideways-lr;
         .explore-grid-item & { font-size: calc(var(--main-adjuster) * (14/400)); }
      }
    }
    &.grid-genre-title * { font-size: calc(var(--main-adjuster) * (28/400)) !important; }
  }

  /* Grid Column Span 3 Combinations */
  .mansory-4-6-1 &:nth-child(4),
  .mansory-4-6-1-1 &:nth-child(1),
  .mansory-6-6-1-3 &:nth-child(3),
  .mansory-6-6-5-2 &:nth-child(1),
  .mansory-6-6-5-2 &:nth-child(5),
  .mansory-6-6-6-1 &:nth-child(1) {
    grid-column: span 3;
    &.grid-genre-title * { font-size: calc(var(--main-adjuster) * (28/400)) !important; }
  }
}

/* ==========================================================================
   6. EXPLORE & SEARCH GRID ITEMS
   ========================================================================== */
.search-grid-item,
.explore-grid-item {
  position: relative;
  background: white;
  border: calc(var(--main-adjuster) * (2/400)) solid #171717;

  &.explore-grid-item {
    position: relative;
    left: calc(var(--main-adjuster) * (50/400));
    overflow: hidden;
    opacity: 0;
    transition: .5s;
    transition-delay: .5s;

    .grid-set-container.visible & {
      opacity: 1;
      left: 0;
    }

    & > * {
      transition: inherit;
      transition-delay: inherit;
    }
  }

  /* Staggered Animations */
  &.explore-grid-item:nth-child(1) { transition: .10s; transition-delay: .10s; }
  &.explore-grid-item:nth-child(1) > * { transition: inherit; transition-delay: inherit; }
  
  &.explore-grid-item:nth-child(2) { transition: .20s; transition-delay: .20s; }
  &.explore-grid-item:nth-child(2) > * { transition: inherit; transition-delay: inherit; }
  
  &.explore-grid-item:nth-child(3) { transition: .30s; transition-delay: .30s; }
  &.explore-grid-item:nth-child(3) > * { transition: inherit; transition-delay: inherit; }
  
  &.explore-grid-item:nth-child(4) { transition: .40s; transition-delay: .40s; }
  &.explore-grid-item:nth-child(4) > * { transition: inherit; transition-delay: inherit; }
  
  &.explore-grid-item:nth-child(5) { transition: .50s; transition-delay: .50s; }
  &.explore-grid-item:nth-child(5) > * { transition: inherit; transition-delay: inherit; }
  
  &.explore-grid-item:nth-child(6) { transition: .60s; transition-delay: .60s; }
  &.explore-grid-item:nth-child(6) > * { transition: inherit; transition-delay: inherit; }
  
  &.explore-grid-item:nth-child(7) { transition: .70s; transition-delay: .70s; }
  &.explore-grid-item:nth-child(7) > * { transition: inherit; transition-delay: inherit; }
  
  &.explore-grid-item:nth-child(8) { transition: .80s; transition-delay: .80s; }
  &.explore-grid-item:nth-child(8) > * { transition: inherit; transition-delay: inherit; }
  
  &.explore-grid-item:nth-child(9) { transition: .90s; transition-delay: .90s; }
  &.explore-grid-item:nth-child(9) > * { transition: inherit; transition-delay: inherit; }

  &.explore-grid-item .grid-set-image {
    transform: scale(2);
    transition: 1.5s !important;
    .grid-set-container.visible & { transform: scale(1.0); }
  }

  & .grid-item-details {
    display: none;
    padding: calc(var(--main-adjuster) * (10/400));
    flex-wrap: wrap;
    position: absolute;
    align-items: end;
    align-content: flex-end;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, black, transparent);

    .grid-genre-title & { background: transparent !important; }
    .grid-set-container.visible & { opacity: 1; }
  }

  & .grid-item-title {
    width: 100%;
    color: white;
    -webkit-line-clamp: 2;
    font-size: calc(var(--main-adjuster) * (20/400));

    .explore-grid-item & { font-size: calc(var(--main-adjuster) * (12/400)); }

    .grid-genre-title & {
      width: 100% !important;
      height: 100% !important;
      display: flex;
      text-align: center;
      align-items: center;
      justify-content: center;
      font-family: Monoton, sans-serif;
      line-height: 1.5;
      color: black !important;
      text-shadow: 
        calc(var(--main-adjuster) * (1/400)) calc(var(--main-adjuster) * (1/400)) 0 #eb452b, 
        calc(calc(var(--main-adjuster) * (10/400)) / 5) calc(calc(var(--main-adjuster) * (10/400)) / 5) 0 #efa032, 
        calc(calc(var(--main-adjuster) * (15/400)) / 5) calc(calc(var(--main-adjuster) * (15/400)) / 5) 0 #46b59b, 
        calc(calc(var(--main-adjuster) * (20/400)) / 5) calc(calc(var(--main-adjuster) * (20/400)) / 5) 0 #017e7f, 
        calc(calc(var(--main-adjuster) * (25/400)) / 5) calc(calc(var(--main-adjuster) * (25/400)) / 5) 0 #052939, 
        calc(calc(var(--main-adjuster) * (30/400)) / 5) calc(calc(var(--main-adjuster) * (30/400)) / 5) 0 #c11a2b, 
        calc(calc(var(--main-adjuster) * (35/400)) / 5) calc(calc(var(--main-adjuster) * (35/400)) / 5) 0 #c11a2b;
    }
  }

  & .grid-item-name {
    display: none;
    width: 100%;
    color: #ddd;
    font-size: calc(var(--main-adjuster) * (14/400));
    .explore-grid-item & { font-size: calc(var(--main-adjuster) * (10/400)); }
  }
}