@font-face {
  font-family: Gravity;
  src: url(https://res.cloudinary.com/apth60tu/raw/upload/v1790170357/ABCGravity-XXCompressed-Trial.woff2) format("woff2");
}

@font-face {
  font-family: Arizona;
  src: url(https://res.cloudinary.com/apth60tu/raw/upload/v1790170358/ABCArizonaSansCompressed-Bold-Trial.woff2) format("woff2");
}

@font-face {
  font-family: Gramercy;
  src: url(https://res.cloudinary.com/apth60tu/raw/upload/v1790170357/ABCGramercy-BookItalic-Trial.otf) format("opentype");
}

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

body {
  background-color: #e5e5e5;
  color: #3A3436;
}

main {
  position: relative;
  width: 564px;
  height: 846px;
  margin: 0 auto;
  padding: 28px;
  overflow: hidden;
  background-color: #EBEBED;
}

h1, h2, h3 {
  font-family: Gravity, Impact, sans-serif;
  font-weight: normal;
}

p, li {
  font-family: Arizona, Arial, sans-serif;
}

header {
  height: 105px;
  border-bottom: 1.5px solid #A2A2A2;
}

header h1 {
  position: relative;
  top: -16px;
  width: 390px;
  font-size: 102.5px;
  line-height: 0.85;
  white-space: nowrap;
  transform: scaleY(1.12);
  transform-origin: top left;
}

.steps {
  position: absolute;
  top: 28px;
  right: 19px;
  width: 105px;
  height: 215px;
  display: flex;
  gap: 15px;
  z-index: 2;
}

.steps > div {
  height: 215px;
  font-family: Gravity, Impact, sans-serif;
  font-size: 83.5px;
  line-height: 0.85;
  white-space: nowrap;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.steps > div span:last-child {
  color: #EDDF00;
}

.steps p {
  font-family: Gramercy, Georgia, serif;
  font-size: 10px;
  line-height: 1;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.food {
  width: 508px;
  height: 134.5px;
  display: grid;
  grid-template-columns: 180px 160px 1fr;
  align-items: center;
  border-bottom: 1.5px solid #A2A2A2;
}

.food h2 {
  position: relative;
  top: -7.5px;
  font-size: 54px;
  line-height: 0.9;
  transform: scaleX(0.8);
  transform-origin: top left;
}

.food > div {
  display: grid;
  grid-template-columns: 66px 73px;
  gap: 5px 6px;
}

.food > div img {
  max-width: none;
}

.food ul {
  padding-left: 15px;
}

.food li {
  font-size: 15px;
  line-height: 1.55;
}

.middle {
  width: 508px;
  height: 334px;
  display: grid;
  grid-template-columns: 214px 268px;
  gap: 26px;
}

.hotspots {
  height: 149px;
  padding-top: 17.5px;
  border-bottom: 1.5px solid #A2A2A2;
}

.spot-chart {
  height: 75px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2px;
}

.spot-chart > div {
  height: 75px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2.5px;
}

.spot-chart > div p {
  font-size: 10.5px;
  line-height: 1;
  white-space: nowrap;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.spot-chart span {
  display: block;
  width: 12px;
  background-color: #EDDF00;
}

.jacobs { height: 69px; }
.soda { height: 61.5px; }
.dwinelle { height: 29px; }
.chett { height: 13.5px; }
.milk { height: 22px; }
.kresge { height: 9.5px; }

.hotspots-footer {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 6px;
  align-items: end;
  padding-top: 12.5px;
}

.hotspots-footer h2 {
  font-size: 37.5px;
  line-height: 0.9;
  transform: scaleX(0.8);
  transform-origin: top left;
}

.hotspots-footer p {
  font-family: Gramercy, Georgia, serif;
  font-size: 10px;
  line-height: 1.1;
}

.transport {
  height: 185px;
  padding-top: 18.5px;
  border-bottom: 1.5px solid #A2A2A2;
}

.transport-row {
  height: 34px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.transport-row h3 {
  font-size: 33px;
  line-height: 0.9;
  white-space: nowrap;
}

.transport-row span {
  display: block;
  height: 28px;
  background-color: #EDDF00;
}

.bus { width: 115px; }
.scooter { width: 117px; }
.foot { width: 175px; }
.car { width: 65px; }

.transport > p {
  margin-top: 5px;
  font-family: Gramercy, Georgia, serif;
  font-size: 10px;
}

.playlists {
  height: 192.5px;
  display: grid;
  grid-template-columns: 90.5px 167.5px;
  gap: 10px;
  padding-top: 16px;
}

.playlists h2 {
  position: relative;
  top: -8.5px;
  font-size: 37.5px;
  line-height: 0.92;
  transform: scaleX(0.8);
  transform-origin: top left;
}

.playlists ol {
  margin: 1px 0 1px 11px;
}

.playlists li {
  font-size: 11px;
  line-height: 1.32;
}

.playlists p {
  font-family: Gramercy, Georgia, serif;
  font-size: 10.5px;
}

.playlists img {
  width: 171px;
  height: auto;
}

.restaurants {
  height: 125.5px;
  margin-top: 16px;
  padding: 8px 9px;
  border: 1px solid #A2A2A2;
}

.restaurant-heading {
  display: grid;
  grid-template-columns: 126px 1fr;
  gap: 5px;
}

.restaurant-heading h2 {
  font-size: 28.5px;
  line-height: 0.95;
  white-space: nowrap;
}

.restaurant-heading p {
  font-family: Gramercy, Georgia, serif;
  font-size: 9.5px;
  line-height: 1.08;
}

.ratings {
  height: 62.5px;
  margin-top: 7.5px;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 1.5px;
}

.rating {
  height: 62.5px;
  display: flex;
  align-items: flex-end;
  gap: 2px;
}

.rating p {
  font-size: 9px;
  line-height: 1;
  white-space: nowrap;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.stars {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.stars img {
  width: 12px;
}

.commitments {
  position: relative;
  width: 508px;
  height: 117px;
  border-bottom: 1.5px solid #A2A2A2;
}

.commitments h2 {
  position: absolute;
  top: 15.5px;
  left: 0;
  z-index: 1;
  width: 155px;
  font-size: 31px;
  line-height: 0.93;
}

.commitments img {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 507px;
  height: 90px;
}

.commitments > div {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 508px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.commitments > div span {
  font-family: Gramercy, Georgia, serif;
  font-size: 10px;
}

.sleep {
  height: 99.5px;
  display: grid;
  grid-template-columns: 165px 140px 1fr;
  gap: 10px;
  align-items: center;
}

.sleep h2 {
  font-size: 90px;
  line-height: 1;
  white-space: nowrap;
  transform: scaleY(1.15);
}

.sleep p {
  font-family: Gramercy, Georgia, serif;
  font-size: 10px;
  line-height: 1.1;
}

.sleep img {
  width: 137px;
  margin: 3.5px 0;
}