.root {
  width: 100%;
  height: 100vh;
  position: relative;
  cursor: pointer;
  display: block;
  min-height: 0;
  max-height: 100%;
  height: auto;
  padding-bottom: 100%;
  max-width: 100%;
}

.root:hover {
  color: var(--color-white);
}

.inner {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  text-align: left;
}

.location {
  position: absolute;
  top: 0;
  left: 0;
  color: var(--color-white);
  text-transform: uppercase;
  font: var(--font-small-ii);
  letter-spacing: var(--letter-spacing-small-ii);
  font-weight: var(--fontweight-demi);
  padding: var(--size-medium);
  color: var(--color-white);
}

.bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: var(--size-medium);
}

.name {
  font: var(--font-regular);
  letter-spacing: var(--letter-spacing-regular);
  line-height: 1.25;
  padding-bottom: var(--size-small);
  font-weight: var(--fontweight-demi);
}

.price {
  font: var(--font-small-ii);
  letter-spacing: var(--letter-spacing-small-ii);
  font-weight: var(--fontweight-demi);
}

.large .location,
.large .bottom {
  padding: var(--size-medium);
}

.large .name {
  font: var(--font-large-i);
  letter-spacing: var(--letter-spacing-large-i);
  font-weight: var(--fontweight-demi);
}

.large .location,
.large .price {
  font: var(--font-small-i);
  letter-spacing: var(--letter-spacing-small-i);
  font-weight: var(--fontweight-demi);
}