.rewards {
  --background: hsl(from var(--background-color) h s calc(l + 85));
  background-color: var(--background);
  background-image: 
    radial-gradient(ellipse farthest-side at top,
      white,
      transparent
    ),
    var(--rewards-background);
  background-position: center;
  background-repeat: repeat-y;
  background-size: contain;
  color: contrast-color(var(--background));

  padding: 3vw;
  padding-block-end: calc(3vw + 1rem);
}

.rewards .contents {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: var(--gap);
}

.rewards-cards {
  border-radius: var(--border-radius);
  overflow: hidden;
  gap: 0;

  figcaption {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.25rem;
    /* U260528 - paddings */
    padding: 0.125rem 0 1rem;
    /* padding-block-start: 0.125rem; */
  }
}

.rewards .rewards-cards img {
  background-image: 
    radial-gradient(
      ellipse farthest-side at center,
      color-mix(in srgb,
        white,
        hsl(from var(--background) h s calc(l + 10)) 33%
      ),
      transparent
    );
  
  filter: drop-shadow(0 5px 2px var(--background));
}

.rewards .rewards-cards p {
  width: 86%;
  text-wrap: balance;
  margin-inline: auto;
}

.rewards .rewards-cards button {
  margin-block-start: 0.5rem;
}

@media (width <= 900px) {
  .rewards .contents {
    grid-template-columns: repeat(4, 1fr);
    row-gap: 2.5rem;
  }
  .rewards-cards {
    grid-column: span 2;
  }
  .permanent-reward {
    order: 3;
    grid-column: 2/ span 2;
  }
  .squad-reward {
    order: 2;
  }
}

@media (width <= 600px) {
  .rewards-cards {
    grid-column: span 4;
  }
  .permanent-reward {
    order: unset;
    grid-column: 1 / -1;
  }
  .squad-reward {
    order: unset;
  }
}

dialog[open].rewards-modal {
  --modal-width: 37.5rem;

  overflow: hidden;
  justify-content: flex-start;
  align-items: flex-start;
  max-height: 100dvh;
}

dialog[open].rewards-modal .modal-container {
  width: 100%;
  overflow-y: auto;

  justify-content: flex-start;
  align-items: center;

  img {
    margin-block-end: 0.25rem;
  }

  ul {
    list-style: none;
  }

  li, p {
    line-height: 1.5;
  }
}