/* Break point
---------------------------------------------------------- */
/* Placeholder
---------------------------------------------------------- */
@media (any-hover: hover) {
  .p-top__links__link:hover {
    opacity: 0.7;
  }
  .p-top__links__link:focus-visible {
    opacity: 0.7;
  }
}

/* Hero
---------------------------------------------------------- */
.p-top__hero {
  --background-size: 20%;
  padding-bottom: 2rem;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(var(--color-background)));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) var(--background-size), var(--color-background) var(--background-size));
}
@media screen and (min-width: 960px) {
  .p-top__hero {
    --background-size: 35%;
    padding-bottom: 3rem;
  }
}

/* Links
---------------------------------------------------------- */
.p-top__links {
  margin-top: 1.5rem;
}
@media screen and (min-width: 960px) {
  .p-top__links {
    margin-top: 2.5rem;
  }
}
.p-top__links__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1rem;
  max-width: 1080px;
  margin-inline: auto;
}
@media screen and (min-width: 960px) {
  .p-top__links__list {
    grid-template-columns: repeat(5, 1fr);
  }
}
.p-top__links__item {
  -ms-flex-preferred-size: 40%;
      flex-basis: 40%;
}
.p-top__links__link {
  width: 100%;
  display: block;
}
.p-top__links__link img {
  width: 100%;
  -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15);
          box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15);
}

/* Section
---------------------------------------------------------- */
.p-top__section {
  margin-top: 2.5rem;
}
@media screen and (min-width: 960px) {
  .p-top__section {
    margin-top: 3.5rem;
  }
}
.p-top__section--materials {
  padding-block: 2rem 3.5rem;
}

/* Report
---------------------------------------------------------- */
.p-top__reportList {
  margin-top: 1.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1rem;
}
@media screen and (min-width: 960px) {
  .p-top__reportList {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Tabs
---------------------------------------------------------- */
.p-top__tabs {
  margin-top: 1.5rem;
}

/* Material TabList
---------------------------------------------------------- */
@media screen and (min-width: 960px) {
  .p-top__materialTabList button {
    font-size: clamp(0.75rem, 0.306rem + 0.74vw, 1rem);
  }
}