*,
*::after,
*::before {
  margin: 0;
  padding: 0;
}

img {
  width: 100%;
}

body {
  display: grid;
  place-content: center;
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    "Open Sans",
    "Helvetica Neue",
    sans-serif;
  background-image: url("./assets/flag_bg.webp");
  background-color: cornsilk;
}

main {
  display: flex;
  column-gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 1000px;
  margin-block-end: 2rem;
}

h1 {
  text-align: center;
  margin-block: 1rem;
  font-size: 2.25rem;
  position: relative;

  &::after {
    content: "";
    background-image: url("./assets/nascar_logo.webp");
    position: absolute;
    left: 50%;
    top: 115%;
    transform: translateX(-50%);
    z-index: 999;
    width: 150px;
    height: 32px;
    background-size: contain;
    background-repeat: no-repeat;
  }
}

.card {
  width: 350px;
  position: relative;
  overflow: hidden;
  border-radius: 35px;
  filter: drop-shadow(3px 4px 5px hsl(0deg 0% 0% / 0.4));

  .track-main {
    position: absolute;
    display: block;
    top: 0.5rem;
    z-index: -1;
    border-radius: 25px;
  }

  .track-facts {
    position: absolute;
    inset: 6px 0 100px 0;
    display: none;
    z-index: -1;
    place-content: center;

    p {
      max-width: 25ch;
      font-weight: 500;
      font-size: 1.25rem;
      margin-block-end: 0.5rem;

      span {
        font-weight: 700;
      }
    }
  }

  .track-logo {
    position: absolute;
    bottom: 0;
    width: 85%;
    left: 50%;
    transform: translateX(-50%);
    width: 250px;
    height: 125px;
  }

  .goog-atr {
    position: absolute;
    top: 1.5rem;
    color: white;
    font-size: 0.85rem;
    left: 50%;
    white-space: nowrap;
    transform: translateX(-50%);
    background-color: hsla(0 0 0 / 0.4);
    padding: 0.1rem 0.3rem 0.15rem;
    border-radius: 10px;
  }
}

#next-oreilly-race {
  .decor-flag {
    overflow: hidden;
    position: absolute;
    bottom: 0.55rem;
    left: 0;
    right: 0;
    border-radius: 0 0 35px 35px;
  }
  .decor-flag::after {
    content: "";
    background-image: url("./assets/decoration_flag.svg");
    width: 100%;
    height: 120px;
    display: block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position-y: 50px;
    opacity: 0.075;
    scale: 2.5;
  }
}

section {
  width: 350px;
  text-align: center;
  font-size: 1.125rem;
  font-weight: 500;
}

.label-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-block: 0.5rem;
}

.race-name {
  max-width: 25ch;
  margin-inline: auto;
  font-weight: 700;
}

hr {
  height: 3px;
  width: 100%;
  border-radius: 5px;
  background-image: linear-gradient(
    to right,
    hsl(52 95 57) 10%,
    hsl(3 85 57),
    hsl(319 41 52),
    hsl(198 97 39) 85%
  );
  margin-block: 0.75rem 0.5rem;
  filter: drop-shadow(1px 2px 4px hsl(0deg 0% 0% / 0.3));
}

h2 {
  font: inherit;
  font-size: 1rem;
  margin-block: 0.25rem 0.15rem;
}

a {
  margin-block-end: 0.5rem;
  display: block;
  font-size: 0.85rem;
}

.logo-sm {
  width: 100px;
  filter: drop-shadow(3px 4px 5px hsl(0deg 0% 0% / 0.4));
}

#next-oreilly-race {
  .track-logo {
    display: none;
  }
}

.cup-off-week-msg {
  position: absolute;
  inset: 6px 0 100px 0;
  font-size: 3rem;
  font-weight: 700;
  opacity: 0.7;
  display: none;
  place-content: center;
  color: black;
}

@media screen and (width < 725px) {
  #next-oreilly-race {
    margin-block-start: 1.5rem;
  }
}

#next-cup-race .date span {
  font-size: 1.5rem;
}
#next-oreilly-race .date span {
  font-size: 1.5rem;
}
#next-truck-race .date span {
  font-size: 1.5rem;
}