.category-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.category {
  height: 420px;
}

.category.cat-iqos-heats {
  background: linear-gradient(145deg, #2a2218, #12110f);
}

.category.cat-terea {
  background: linear-gradient(145deg, #181b28, #101116);
}

.category.cat-glo {
  background: linear-gradient(145deg, #2a1422, #120d12);
}

.category.cat-pod {
  background: linear-gradient(145deg, #201735, #111017);
}

.category.cat-cigarettes {
  background: linear-gradient(145deg, #2a2925, #121211);
}

.category h3 {
  position: relative;
  z-index: 2;
  max-width: calc(100% - 64px);
}

.category p {
  position: relative;
  z-index: 2;
}

.cat-index {
  z-index: 3;
}

.circle-arrow {
  z-index: 3;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  font: 500 18px/1 Manrope, Arial, sans-serif;
}

.cat-photo {
  isolation: isolate;
}

.cat-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(6, 7, 9, .08) 0%, rgba(6, 7, 9, .36) 48%, rgba(6, 7, 9, .92) 100%),
    linear-gradient(90deg, rgba(6, 7, 9, .22) 0%, rgba(6, 7, 9, 0) 55%);
  pointer-events: none;
}

.cat-photo::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: 1;
  border: 1px solid rgba(255, 255, 255, .08);
  pointer-events: none;
}

.category-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.03);
  transition: transform .45s ease, opacity .45s ease;
}

.category:hover .category-photo {
  transform: scale(1.08);
}

.cat-iqos-heats .category-photo {
  object-position: 58% 50%;
}

.cat-terea .category-photo {
  object-position: 69% 50%;
}

.cat-glo .category-photo {
  object-position: 52% 43%;
}

.cat-cigarettes .category-photo {
  object-position: 50% 52%;
}

.brand-orb {
  position: absolute;
  width: 190px;
  height: 190px;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: radial-gradient(circle at 35% 25%, rgba(255,255,255,.4), rgba(200,255,61,.15) 28%, rgba(13,14,12,.92) 72%);
  box-shadow: 0 0 80px rgba(200,255,61,.14);
}

.brand-orb span {
  font: 600 25px/1 Unbounded, sans-serif;
  letter-spacing: -.05em;
}

.brand-orb small {
  margin-top: 10px;
  color: var(--lime);
  font: 700 9px/1 Unbounded, sans-serif;
  letter-spacing: .25em;
}

.cat-terea .brand-orb {
  background: radial-gradient(circle at 35% 25%, rgba(255,255,255,.42), rgba(91,116,255,.24) 28%, rgba(8,10,20,.94) 72%);
  box-shadow: 0 0 80px rgba(91,116,255,.2);
}

.cat-glo .brand-orb {
  background: radial-gradient(circle at 35% 25%, rgba(255,255,255,.4), rgba(255,72,151,.22) 28%, rgba(22,5,15,.94) 72%);
  box-shadow: 0 0 80px rgba(255,72,151,.16);
}

.cat-pod .brand-orb {
  background: radial-gradient(circle at 35% 25%, #d2b8ff, #7344ff 25%, #201246 60%, #09060e 75%);
  box-shadow: 0 0 80px rgba(123,70,255,.35);
}

.cat-cigarettes .brand-orb {
  background: radial-gradient(circle at 35% 25%, rgba(255,255,255,.38), rgba(222,184,93,.2) 28%, rgba(20,15,7,.94) 72%);
  box-shadow: 0 0 80px rgba(222,184,93,.13);
}

@media (max-width: 900px) {
  .category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cat-large {
    grid-column: auto;
  }
}

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

  .category {
    height: 390px;
  }

  .brand-orb {
    width: 170px;
    height: 170px;
  }

  .cat-iqos-heats .category-photo {
    object-position: 58% 50%;
  }

  .cat-terea .category-photo {
    object-position: 70% 50%;
  }

  .cat-glo .category-photo {
    object-position: 50% 42%;
  }

  .cat-cigarettes .category-photo {
    object-position: 50% 47%;
  }
}