:root {
  /* Colors */
  --clr-bgk: hsl(216, 58%, 10%);
  --clr-bgk-comp: hsl(217, 54%, 18%);
  --clr-text: rgb(189, 202, 210);
  --clr-accent: rgb(5, 209, 209);

  /* Utilities */
  --util-height: 38rem;
  --util-padding: 1.5rem;
}

*,
*::after,
*::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Outfit', sans-serif;
  background-color: var(--clr-bgk);
}

.nft_container {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100dvh;
}

.nft_container__h1 {
  text-align: center;
  font-size: clamp(3rem, 4vw, 5rem);
  background: -webkit-linear-gradient(var(--clr-accent), var(--clr-bgk));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 1rem;
}

.nft_container__article {
  width: min(100%, 23em);
  height: var(--util-height, fit-content);
  background-color: var(--clr-bgk-comp);
  color: var(--clr-text);
  border-radius: 20px;
  display: grid;
  grid-template-rows: repeat(2, 1fr);
}

.nft_container__img {
  position: relative;
  height: calc(var(--util-height) / 1.7);
  padding: var(--util-padding);
  display: flex;
  transform-style: preserve-3d;
  transform: perspective(1000px);
}

@media (hover: hover) {
  .nft_container__img::before {
    position: absolute;
    content: '';
    inset: 0;
    background: linear-gradient(var(--clr-accent), var(--clr-text));
    border-radius: 16px;
  }

  .nft_container__img::after {
    position: absolute;
    filter: blur(0.5rem);
    content: '';
    inset: 15px;
    background-color: rgb(251, 42, 42);
  }
}

.nft_img {
  width: 100%;
  object-fit: cover;
  display: block;
  border-radius: 20px;
  transform: translateZ(20px);
}

.nft_container__info {
  height: calc(var(--util-height) / 2.3);
  padding: 0 var(--util-padding);
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.nft_container__info h2 {
  font-size: clamp(1.3rem, 2vw, 1.5rem);
  font-weight: 600;
}

.nft_container__info p {
  font-size: 1rem;
  font-weight: 400;
  color: rgb(160, 168, 172);
}

.nft_container__sale {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nft_container__price {
  font-weight: 600;
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.nft_container__price span {
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  color: var(--clr-accent);
}

.nft_container__price img {
  width: 1.5rem;
  aspect-ratio: 1;
  object-fit: contain;
}
.nft_container__time {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.nft_container__time img {
  width: 1rem;
  aspect-ratio: 1;
  object-fit: contain;
}

.nft_container__creator {
  display: flex;
  align-items: center;
  gap: 1rem;
  border-top: 1px solid var(--clr-text);
  padding: var(--util-padding) 0;
}

.creator_avatar img {
  width: 2rem;
  border: solid 1px var(--clr-text);
  border-radius: 50%;
  object-fit: cover;
}

.creator_avatar p {
  color: var(--clr-text);
  font-weight: 400;
}
.attribution {
  font-size: 11px;
  text-align: center;
}
.attribution a {
  color: var(--clr-text);
}