:root {
  --banner-height: 220px;
}

main{
  display: flex;
  justify-content: center;
}

.vote-container {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows:
    [banner] var(--banner-height)
    [infoBx] auto
    [projectBx] auto
    [devlogBx] auto;

  max-width: 1240px;
}

.project {
  grid-row: 1 / -1;
  display: grid;
  grid-template-rows: subgrid;
}

/* .project h2 {
  grid-row: title;
}

.project p {
  grid-row: description;
} */

.banner {
  grid-row: banner;
  border-radius: 12px;
  overflow: hidden;
}

.banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profileBx {
  position: absolute;
  top: calc(var(--banner-height) - 10px);
}

.profileBx img {
  width: 100px;
  height: 100px;
  margin-left: 20px;
  background-size: cover;
  background-position: center;
  border-radius: 50%;
  border: 16px solid var(--base-clr);
  border-radius: 100%;
}

.infoBx {
  grid-row: infoBx;
  background: var(--text-clr);
  border-radius: 12px;
}

.infoBx h2 {
  color: var(--base-clr);
  margin-left: 160px;
  padding: 12px;
  padding-bottom: 0;
}

.infoBx p {
  color: var(--base-clr);
  margin-left: 160px;
  padding-left: 12px;
}

.projectBx {
  grid-row: projectBx;
  background: var(--text-clr);
  padding: 20px;
  border-radius: 12px;

  h2,
  p {
    color: var(--base-clr);
  }
}

.devlogBx {
  grid-row: devlogBx;
  background: var(--text-clr);
  border-radius: 12px;

  h3,
  p {
    color: var(--base-clr);
  }

  img{
    width: 100%;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
  }
}

.devlogBx .devlog-content{
  padding: 12px;
}

/* HEART STUFF */