:root {
  --screen-min: 320px;
  --screen-max: 1440px;
  --fluid-ratio: calc(
    (100vw - var(--screen-min)) / (var(--screen-max) - var(--screen-min))
  );
  --size-xs: clamp(
    0.375rem,
    calc(0.375rem + (0.625rem - 0.375rem) * var(--fluid-ratio)),
    0.625rem
  );
  --size-sm: clamp(
    0.625rem,
    calc(0.625rem + (0.875rem - 0.625rem) * var(--fluid-ratio)),
    0.875rem
  );
  --size-md: clamp(
    0.875rem,
    calc(0.875rem + (1.125rem - 0.875rem) * var(--fluid-ratio)),
    1.125rem
  );
  --size-lg: clamp(
    1.125rem,
    calc(1.125rem + (1.375rem - 1.125rem) * var(--fluid-ratio)),
    1.375rem
  );
  --size-xl: clamp(
    1.375rem,
    calc(1.375rem + (1.625rem - 1.375rem) * var(--fluid-ratio)),
    1.625rem
  );
  --size-xxl: clamp(
    1.625rem,
    calc(1.625rem + (1.875rem - 1.625rem) * var(--fluid-ratio)),
    1.875rem
  );
  --size-xxxl: clamp(
    3rem,
    calc(3rem + (4.5rem - 3rem) * var(--fluid-ratio)),
    4.5rem
  );

  background-color: black;
  --yellow: rgba(242, 248, 210, 0.7);
}

header {
  z-index: 50;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 120px;
  padding: 3px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  /* background-color: rgba(242, 248, 210, 0.7); */
  background: linear-gradient(
    to bottom,
    #00000000 0%,
    var(--yellow) 25%,
    var(--yellow) 75%,
    #00000000 100%
  );
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(10px);
}

.cards {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, 300px);
  justify-content: center;
  gap: 10px;
  padding: 80px 0;
  /* background-size: 70px; */
  margin-top: 200px;
}

.card {
  height: auto;
  width: 100%;
  border: 1px solid var(--yellow);
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto auto;
  border-radius: var(--size-sm);
  justify-content: center;
  padding: calc(var(--size-xs) / 4);

  & h1 {
    width: calc(var(--size-xl) * 10);
    --lines: 1;
    --line-height: 1.2em;
    line-height: var(--line-height);
    min-height: calc(var(--line-height) * var(--lines));
    max-height: calc(var(--line-height) * var(--lines));
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--lines);
    line-clamp: var(--lines);
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: var(--size-xxl);
    color: var(--yellow);
    text-align: center;
  }

  & img {
    width: calc(var(--size-xl) * 10);
    aspect-ratio: 1 / 1;
  }
}