:root {
  --soft-blue: #8BACD9;
  --white: #FFF;
  --cyan: #00FFF8;
  --dark-blue-main: #0D192C;
  --dark-blue-card: #15263F;
  --dark-blue-line: #2E405A;

  --fw-semi-bold: 600;
  --fw-light: 300;
}

* {
  box-sizing: border-box;
  margin: 0;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

html {
  font-family: 'Outfit';
}

body {
  background-color: var(--dark-blue-main);
  height: 100vh;
  display: grid;
  place-items: center;
}

.card {
  max-width: 21.875rem; /* 350px */
  background-color: var(--dark-blue-card);
  margin: 1rem;
  border-radius: 0.9375rem;
  padding: 1.5rem;
  color: var(--white);
  display: grid;
  gap: 1.5rem;
}

.card__image {
  height: 18.875rem; /* 302px */
  position: relative;
  overflow: hidden;
}

.card__modal {
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: -100%;
  left: 0;
  display: grid;
  place-content: center;
  background-color: rgba(0, 255, 247, 0.5);
  border-radius: 0.5rem;
}

.card__image:hover .card__modal {
  bottom: 0;
}

.image__equilibrium {
  object-fit: cover;
  height: 100%;
  border-radius: 0.5rem;
}

.card__content {
  display: grid;
  gap: 1.5rem;
}

.content__title {
  font-size: 1.375rem;
  font-weight: var(--fw-semi-bold);
  line-height: 1;
  a {
    text-decoration: none;
    color: var(--white);
    &:hover {
    color: var(--cyan);
    }
  }
}

.content__text {
  font-size: 1.125rem;
  font-weight: var(--fw-light);
  color: var(--soft-blue);
  line-height: 1.625rem;
}

.card__states {
  display: flex;
  justify-content: space-between;
}

.states__eth,
.states__days-left {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

.states__eth {
  color: var(--cyan);
  font-weight: var(--fw-semi-bold);
  line-height: 1;
}

.states__days-left {
  color: var(--soft-blue);
  line-height: 1;
}

.card__line {
  border: solid 1px var(--dark-blue-line);
}

.card__info {
  display: flex;
  align-items: center;
  gap: 1rem
}

.image__avatar {
  width: 2.0625rem;
  border-radius: 50%;
  border: solid 1px var(--white);
}

.info__author {
  line-height: 1;
  span {
    color: var(--soft-blue);
  }
  a {
    text-decoration: none;
    color: var(--white);
    &:hover {
      color: var(--cyan);
    }
  }
}