JobCard.css

.container {
  position: relative;
  container-type: inline-size;
  container-name: jobview;
}

.inner {
  background: var(--chakra-colors-white);
  border-radius: 12px;
  padding: 40px 32px; 
}

.top {
  align-items: center;
  justify-content: space-between;
  display: flex;
}

.published {
  color: var(--chakra-colors-grey-003);
  order: 2;
  text-align: right;
}

.title {
  color: var(--chakra-colors-dark);
  order: 1;
}


.bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 12px;
}

.companyName {
  flex-basis: 100%;
  order: 1;
}

.salary {
  font-weight: 600;
  margin-top: 40px;
  order: 3;
}

.divider {
  display: none;
  height: 1px;
  background: var(--chakra-colors-grey-001);
  margin-top: 24px;
}

.tags {
  gap: 12px;
  margin-top: 24px;
  order: 2;
}

.urgent .published {
  font-weight: 600;
  color: var(--chakra-colors-blue);;
}

.highlighted .inner {
  background: var(--chakra-colors-blue);
}

.highlighted .inner, 
.highlighted .published, 
.highlighted .companyName, 
.highlighted .title, 
.highlighted .urgent {
  color: var(--chakra-colors-white);
}

.compact .inner {
  padding: 24px 16px 32px;
}

.compact  .top {
  display: block;
}

.compact .title {
  margin-top: 16px;
}

.compact .bottom {
  display: block;
  margin-top: 48px;
}

.compact  .salary {
  margin-top: 4px;
}

.compact  .divider {
  display: block;
}

@container jobview (max-width: 600px) {
  .inner {
    padding: 24px 16px 32px;
  }

  .top {
    display: block;
  }

  .title {
    margin-top: 16px;
  }

  .bottom {
    display: block;
    margin-top: 48px;
  }
  .salary {
    margin-top: 4px;
  }

  .divider {
    display: block;
  }
}