/*------------------------------------------------------------------------------*/
/*style-theme*/

@media (min-width: 768px) {
    .streams-archive {
      display: flex;
      flex-wrap: wrap;
    }
  }
  @media (min-width: 992px) {
    .streams-archive {
      display: grid;
      height: 100%;
      grid-auto-flow: column;
      grid-template-rows: 50% 50%;
      grid-auto-columns: calc(84.896vh - 72px);
    }
  }
  @media (min-width: 1920px) {
    .streams-archive {
      grid-auto-columns: calc(84.896vh - 100px);
    }
  }
  
  .streams-filter-wrapper {
    display: flex;
    margin-top: 54px;
    z-index: 4;
    padding: 15px 15px 60px;
    text-align: start;
    --s: 100px; /* size  */
    --m: 2px; /* space */
    --r: calc(var(--s) + 4 * var(--m) - 2px);
  }
  @media (min-width: 1920px) {
    .streams-filter-wrapper {
      --s: 140px;
      --m: 4px;
    }
  }
  @media (min-width: 1920px) {
    .streams-filter-wrapper {
      margin-top: 80px;
    }
  }
  
  .streams-filter {
    font-size: 0;
    padding: 0;
    margin: 0;
  }
  .streams-filter::before {
    content: "";
    width: calc(var(--s) / 2 + var(--m));
    float: left;
    height: 140%;
    shape-outside: repeating-linear-gradient(rgba(0, 0, 0, 0) 0 calc(var(--r) - 3px), #000 0 var(--r));
  }
  .streams-filter li {
    padding: 0;
    width: var(--s);
    margin: var(--m);
    height: var(--s);
    display: inline-block;
    font-size: initial;
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
    margin-bottom: calc(var(--m) - var(--s) * 0.5);
  }
  .streams-filter button {
    position: relative;
    width: 70px;
    height: 70px;
    padding: 0;
    outline: 0;
    border: 6px solid var(--color-quaternary);
    transform: rotate(45deg) translateX(30%);
    overflow: hidden;
    color: var(--color-light);
    background-color: var(--color-dark);
    transition: all 300ms ease;
    will-change: transform;
  }
  @media (min-width: 1920px) {
    .streams-filter button {
      width: 98px;
      height: 98px;
      border-width: 8.4px;
    }
  }
  .streams-filter button::before, .streams-filter button::after {
    position: absolute;
    content: "";
    top: -21px;
    left: -21px;
    width: 100px;
    height: 100px;
    z-index: 33;
    transform: rotate(-45deg);
    transition: all 300ms ease;
  }
  @media (min-width: 1920px) {
    .streams-filter button::before, .streams-filter button::after {
      top: -29.5px;
      left: -29.5px;
      width: 140px;
      height: 140px;
    }
  }
  .streams-filter button::before {
    z-index: 34;
    mix-blend-mode: multiply;
    background-color: #6b7199;
  }
  .streams-filter button::after {
    z-index: 35;
    mix-blend-mode: screen;
    background-color: #151720;
  }
  .streams-filter button .streams-filter__img {
    width: 100px;
    height: 100px;
    position: absolute;
    left: calc(50% + 6px);
    top: calc(50% + 6px);
    -o-object-fit: cover;
       object-fit: cover;
    margin: 0 auto;
    transform: translate(-50%, -50%) rotate(-45deg);
    filter: grayscale(100%);
    will-change: transform;
  }
  @media (min-width: 1920px) {
    .streams-filter button .streams-filter__img {
      left: calc(50% + 8px);
      top: calc(50% + 8px);
      width: 140px;
      height: 140px;
    }
  }
  .streams-filter button .streams-filter__img--all {
    width: 60px;
    height: 60px;
    left: 50%;
    top: 50%;
  }
  @media (min-width: 1920px) {
    .streams-filter button .streams-filter__img--all {
      left: 50%;
      top: 50%;
      width: 84px;
      height: 84px;
    }
  }
  .streams-filter button:hover, .streams-filter button.active {
    position: relative;
    z-index: 1;
    border-color: var(--color-primary);
  }
  .streams-filter button:hover img, .streams-filter button.active img {
    filter: grayscale(0);
  }
  .streams-filter button:hover::before, .streams-filter button:hover::after, .streams-filter button.active::before, .streams-filter button.active::after {
    display: none;
  }




/*------------------------------------------------------------------------------*/
/*custom*/