.tab--0 .tab__desktop {
  display: none;
}

.tab--0 .tab__mobile {
  display: block;
}

.tab--0 .tab__mobile > * + * {
  margin-top: 3.125rem;
}

.tab--0 .tab__mobile .tab__summary {
  --background-color: linear-gradient(117.63deg, #e30421 1.69%, #960317 91.18%);
  --edge-size-y: 17px;
  --edge-size-x: 35px;

  position: relative;
  padding: 1rem;
  font-size: 18px;
  font-weight: var(--fw-bold);
  text-align: center;
  color: var(--clr-white);
}

.tab--0 .tab__mobile .tab__summary::before {
  content: '';
  position: absolute;
  background-image: var(--background-color);
  clip-path: polygon(
    0 0%,
    100% 0,
    100% calc(100% - var(--edge-size-y)),
    calc(100% - var(--edge-size-x)) 100%,
    0 100%,
    0% var(--edge-size-x)
  );
  z-index: -1;
  top: 0;
  right: 0;
  left: 0;
  bottom: 4px;
  border-radius: 2px;
}

.tab--0 .tab__mobile .tab__summary::after {
  content: '';
  position: absolute;
  background-color: var(--clr-primary);
  z-index: -2;
  box-shadow: var(--box-shadow-2);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 2px;
}

.tab--0 .tab__mobile .tab__content {
  padding-block-start: 1.5rem;
}

.tab--0 .tab__graph {
  display: none;
}

.tab--0 .tab__items {
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 1.25rem;
}

.tab--0 .tab__link {
  --background-color: linear-gradient(100.41deg, #e30421 3.96%, #960317 109.45%);
  --border-color: rgba(227, 4, 33, 1);
  --border-width: 0.125em;
  --edge-size-y: 17px;
  --edge-size-x: 35px;

  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: auto;
  padding-inline: 1.25rem;
  padding-block: 0.75rem;
  font-size: 1.125rem;
  font-weight: var(--fw-medium);
  line-height: 25px;
  color: rgba(55, 55, 55, 1);
  background-color: var(--clr-white);
  text-decoration: none;
  text-align: center;
  clip-path: polygon(
    0 0%,
    100% 0,
    100% calc(100% - var(--edge-size-y)),
    calc(100% - var(--edge-size-x)) 100%,
    0 100%,
    0% var(--edge-size-x)
  );
}

.tab--0 .tab__link::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--border-color);
  z-index: -2;
}

.tab--0 .tab__link::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: white;
  z-index: -1;
  clip-path: polygon(
    var(--border-width) var(--border-width),
    calc(var(--edge-size-y) + var(--border-width) * 0.5) var(--border-width),
    calc(100% - var(--border-width)) var(--border-width),
    calc(100% - var(--border-width)) calc(100% - calc(var(--edge-size-y) + var(--border-width) * 0.5)),
    calc(100% - calc(var(--edge-size-x) + var(--border-width) * 0.5)) calc(100% - var(--border-width)),
    calc(var(--border-width)) calc(100% - var(--border-width))
  );
}

.tab--0 .tab__link[aria-selected='true'] {
  color: white;
  background-color: transparent;
  clip-path: none;
}

.tab--0 .tab__link[aria-selected='true']::after {
  clip-path: none;
  background-color: var(--clr-primary);
  background-image: none;
  z-index: -2;
}

.tab--0 .tab__link[aria-selected='true']::before {
  background-image: var(--background-color);
  z-index: -1;
  bottom: 4px;
  clip-path: polygon(
    0 0%,
    100% 0,
    100% calc(100% - var(--edge-size-y)),
    calc(100% - var(--edge-size-x)) 100%,
    0 100%,
    0% var(--edge-size-x)
  );
}

.tab--0 .tab__panel > div {
  max-width: 790px;
  width: 100%;
  margin-inline: auto;
  padding-block-start: 1.5rem;
}

@media (min-width: 992px) {
  .tab--0 .tab__desktop {
    display: block;
  }

  .tab--0 .tab__mobile {
    display: none;
  }

  .tab--0 .tab__graph {
    display: block;
  }

  .tab--0 .tab__items {
    grid-template-columns: repeat(4, 1fr);
  }

  .tab--0 .tab__link {
    height: 122px;
    justify-content: center;
  }
}

@media (min-width: 992px) {
  .tab--0 .tab__link {
    font-size: 1.25rem;
  }
}