.aj-cats-grid {
  display: grid;
  grid-template-areas:
      "a"
      "b"
      "d"
      "c"
      "e";
}

@media (min-width: 1200px) {
  .aj-cats-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(3, auto);
    grid-template-areas:
      "a  b  c"
      "a  b  e"
      "a  d  e";
    align-items: start;
  }
}


.aj-cat-card {
  overflow: hidden;
  position: relative;
}

.aj-cat-card__link {
  display: block;
  height: 100%;
  position: relative;
}

.aj-cat-card {
  --card-h: 227px;
}

.aj-cat-card[data-key="keyboard"] {
  --card-h: 281px;
}

@media (min-width: 1200px) {
  .aj-cat-card[data-key="keyboard"] {
    --card-h: 623px;
  }

  .aj-cat-card[data-key="mouse"] {
    --card-h: 341px;
  }

  .aj-cat-card[data-key="strimdesk"] {
    --card-h: 274px;
  }

  .aj-cat-card[data-key="gamepad"] {
    --card-h: 274px;
  }

  .aj-cat-card[data-key="headset"] {
    --card-h: 341px;
  }
}

/* Media wrapper gets fixed height */
.aj-cat-card__media {
  height: var(--card-h);
  overflow: hidden;
}

/* Hover zoom (optional) */
.aj-cat-card .aj-cat-card__media-inner img {
  transition: transform .35s ease;
  transform: scale(1);
  position: absolute;
}


/* Hover zoom (optional) */
.aj-cat-card:hover .aj-cat-card__media-inner img {
  transform: scale(1.1);
}

.aj-cat-card[data-key="strimdesk"] .aj-cat-card__media-inner img {
  width: 239px;
  height: 239px;
  right: 5%;
  top: calc(50% - 120px);
}

@media (min-width: 1200px) {
  .aj-cat-card[data-key="strimdesk"] .aj-cat-card__media-inner img {
    width: 376px;
    height: 376px;
    right: -7%;
    top: calc(47% - 188px);
  }
}

.aj-cat-card[data-key="headset"] .aj-cat-card__media-inner img {
  width: 144px;
  height: 181px;
  right: 20%;
  top: calc(50% - 90px);
}

@media (min-width: 1200px) {
  .aj-cat-card[data-key="headset"] .aj-cat-card__media-inner img {
    width: 236px;
    height: 297px;
    right: 0;
    top: calc(50% - 148px);
  }
}

.aj-cat-card[data-key="gamepad"] .aj-cat-card__media-inner img {
  width: 212px;
  height: 212px;
  right: 5%;
  top: calc(50% - 106px);
}

@media (min-width: 1200px) {
  .aj-cat-card[data-key="gamepad"] .aj-cat-card__media-inner img {
    width: 348px;
    height: 348px;
    right: -7%;
    top: calc(50% - 174px);
  }
}

.aj-cat-card[data-key="mouse"] .aj-cat-card__media-inner img:nth-child(1) {
  width: 204px;
  height: 93px;
  right: -22%;
  top: calc(50% - 46px);
  z-index: 3;
}

@media (min-width: 1200px) {
  .aj-cat-card[data-key="mouse"] .aj-cat-card__media-inner img:nth-child(1) {
    width: 318px;
    height: 145px;
    right: -39%;
    top: calc(50% - 72px);
  }
}

.aj-cat-card[data-key="mouse"]:hover .aj-cat-card__media-inner img:nth-child(1) {
  transform: translate(-17px);
}

.aj-cat-card[data-key="mouse"] .aj-cat-card__media-inner img:nth-child(2) {
  width: 202px;
  height: 106px;
  object-fit: contain;
  right: -3%;
  top: calc(50% - 60px);
  z-index: 2;
}

@media (min-width: 1200px) {
  .aj-cat-card[data-key="mouse"] .aj-cat-card__media-inner img:nth-child(2) {
    width: 314px;
    height: 168px;
    right: -10%;
    top: calc(50% - 96px);
  }
}

.aj-cat-card[data-key="mouse"]:hover .aj-cat-card__media-inner img:nth-child(2) {
  transform: translate(-40px);
}

.aj-cat-card[data-key="mouse"] .aj-cat-card__media-inner img:nth-child(3) {
  width: 193px;
  height: 96px;
  right: 11%;
  top: calc(50% - 50px);
  z-index: 1;
}

@media (min-width: 1200px) {
  .aj-cat-card[data-key="mouse"] .aj-cat-card__media-inner img:nth-child(3) {
    width: 301px;
    height: 150px;
    right: 11%;
    top: calc(50% - 84px);
  }
}

.aj-cat-card[data-key="mouse"]:hover .aj-cat-card__media-inner img:nth-child(3) {
  transform: translate(-65px);
}

.aj-cat-card[data-key="keyboard"] .aj-cat-card__media-inner img:nth-child(1) {
  width: 186px;
  height: 71px;
  right: 10%;
  bottom: -15.5%;
}

@media (min-width: 1200px) {
  .aj-cat-card[data-key="keyboard"] .aj-cat-card__media-inner img:nth-child(1) {
    width: 406px;
    height: 156px;
    right: calc(50% - 203px);
    bottom: -15.5%;
  }
}

.aj-cat-card[data-key="keyboard"]:hover .aj-cat-card__media-inner img:nth-child(1) {
  transform: translatey(-37px) rotate(3deg);
}

.aj-cat-card[data-key="keyboard"] .aj-cat-card__media-inner img:nth-child(2) {
  width: 197px;
  height: 119px;
  right: 10%;
  bottom: 7%;
}

@media (min-width: 1200px) {
  .aj-cat-card[data-key="keyboard"] .aj-cat-card__media-inner img:nth-child(2) {
    width: 432px;
    height: 261px;
    right: calc(50% - 216px);
    bottom: 7%;
  }
}

.aj-cat-card[data-key="keyboard"]:hover .aj-cat-card__media-inner img:nth-child(2) {
  transform: translatey(-54px) rotate(-3deg);
}

.aj-cat-card[data-key="keyboard"] .aj-cat-card__media-inner img:nth-child(3) {
  width: 198px;
  height: 96px;
  right: 10%;
  bottom: 46%;
}

@media (min-width: 1200px) {
  .aj-cat-card[data-key="keyboard"] .aj-cat-card__media-inner img:nth-child(3) {
    width: 432px;
    height: 211px;
    right: calc(50% - 216px);
    bottom: 46%;
  }
}


.aj-cat-card[data-key="keyboard"]:hover .aj-cat-card__media-inner img:nth-child(3) {
  transform: translatey(-76px) rotate(3deg);
}

/* =========================
   Overlay text
   ========================= */

.aj-cat-card__overlay {
  position: absolute;
  inset: 0;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  pointer-events: none;
}