.marginWrapper {
  margin-bottom: 32px;
}

.wrapper {
  display: flex;
  width: 100%;
  border-radius: var(--radii-large);
  background: var(--color-background-static-muted);
  user-select: none;
  margin: 0;
  padding: 0;
  border: none;
  appearance: none;
  text-align: left;
  overflow: visible;
  position: relative;

  &::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border-radius: var(--radii-large);
    z-index: 4;
    pointer-events: none;
    @extend .pos-1dp;
  }

  &:is(a) {
    cursor: pointer;
  }
}

.shadow {
  position: absolute;
  height: 100%;
  left: 0;
  top: 0;
  width: calc((100% / 3) / (3 / 4));
  z-index: 2;

  // --color-background-static-muted
  background: linear-gradient(
    90deg,
    rgba(19, 19, 21, 1) 0%,
    rgba(19, 19, 21, 0.991353) 6.67%,
    rgba(19, 19, 21, 0.96449) 13.33%,
    rgba(19, 19, 21, 0.91834) 20%,
    rgba(19, 19, 21, 0.852589) 26.67%,
    rgba(19, 19, 21, 0.768225) 33.33%,
    rgba(19, 19, 21, 0.668116) 40%,
    rgba(19, 19, 21, 0.557309) 46.67%,
    rgba(19, 19, 21, 0.442691) 53.33%,
    rgba(19, 19, 21, 0.331884) 60%,
    rgba(19, 19, 21, 0.231775) 66.67%,
    rgba(19, 19, 21, 0.147411) 73.33%,
    rgba(19, 19, 21, 0.0816599) 80%,
    rgba(19, 19, 21, 0.03551) 86.67%,
    rgba(19, 19, 21, 0.0086472) 93.33%,
    rgba(19, 19, 21, 0) 100%
  );

  :global(.light) & {
    // --color-background-static-muted
    background: linear-gradient(
      90deg,
      rgba(248, 248, 249, 1) 0%,
      rgba(248, 248, 249, 0.991353) 6.67%,
      rgba(248, 248, 249, 0.96449) 13.33%,
      rgba(248, 248, 249, 0.91834) 20%,
      rgba(248, 248, 249, 0.852589) 26.67%,
      rgba(248, 248, 249, 0.768225) 33.33%,
      rgba(248, 248, 249, 0.668116) 40%,
      rgba(248, 248, 249, 0.557309) 46.67%,
      rgba(248, 248, 249, 0.442691) 53.33%,
      rgba(248, 248, 249, 0.331884) 60%,
      rgba(248, 248, 249, 0.231775) 66.67%,
      rgba(248, 248, 249, 0.147411) 73.33%,
      rgba(248, 248, 249, 0.0816599) 80%,
      rgba(248, 248, 249, 0.03551) 86.67%,
      rgba(248, 248, 249, 0.0086472) 93.33%,
      rgba(248, 248, 249, 0) 100%
    );
  }
}

.contentBackground {
  position: absolute;
  height: 100%;
  left: 0;
  top: 0;
  width: 25%;
  background: var(--color-background-static-muted);
  z-index: 2;
  border-top-left-radius: var(--radii-large);
  border-bottom-left-radius: var(--radii-large);
}

.imageWrapper {
  position: absolute;
  width: 75%;
  height: 100%;
  right: 0;
  top: 0;
  z-index: 1;
  overflow: hidden;
  border-top-right-radius: var(--radii-large);
  border-bottom-right-radius: var(--radii-large);
}

.imageGrayscaleWrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  right: 0;

  &:not(.isLive) {
    filter: grayscale(1);
    opacity: 0.5;
  }
}

.image {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  right: 0;
  pointer-events: none;
}

.imageBlur {
  position: absolute;
  width: 100%;
  height: 87%;
  right: 0;
  top: 0;
  z-index: 0;
  opacity: 0.75;
  border-radius: 24px;
  filter: blur(64px);
}

.content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 3;
  padding: 32px;
  gap: 104px;
  height: 100%;
}

.bottomContent {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  max-width: 344px;
}

.raceDataWrapper {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.raceTitle {
  @include typography(heading, 500, default);
  color: var(--color-content-strong);
  text-wrap: balance;
}

.raceCountryWrapper {
  display: flex;
  gap: 12px;
}

.raceCountryTextWrapper {
  display: flex;
  flex-direction: column;
}

.raceCountry {
  @include typography(heading, 400, default);
  color: var(--color-content-strong);
}

.raceRound {
  @include typography(text, 300, regular);
  color: var(--color-content-default);
}

.wrapperSkeleton {
  width: 100%;
  height: 404px;
  border-radius: var(--radii-large);
  background: var(--color-background-static-muted);
}
