* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    min-height: 100vh;
    padding: 48px 24px;
    background-color: #d9d6d4;
    color: #3A3436;
    font-family: "Arial Narrow", "Roboto Condensed", "Helvetica Neue Condensed", sans-serif;
    font-stretch: condensed;
}
main {
    width: 620px;
    min-height: 877px;
    margin: 0 auto;
    padding: 28px;
    position: relative;
    overflow: hidden;
    background-color: #EBEBED;
    box-shadow: 0 2px 4px rgba(58, 52, 54, .12),
                0 18px 48px rgba(58, 52, 54, .22);
}

footer {
    width: 564px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}
h1 {
    font-size: 52px;
    color: #3A3436;
    padding-top: 13px;
    border-bottom: 1.5px solid #A2A2A2;
    padding-bottom: 13px;
    white-space: nowrap;
}
.steps {
    width: 150px;
    height: 104px;
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    overflow: hidden;
}
.steps span {
    color: #3A3436;
    font-family: Impact, "Arial Narrow", sans-serif;
    font-size: 21px;
    line-height: 1;
    letter-spacing: .02em;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}
.steps strong {
    color: #EDDF00;
    font-family: Impact, "Arial Narrow", sans-serif;
    font-size: 46px;
    font-weight: 900;
    line-height: .82;
    letter-spacing: -.05em;
    white-space: nowrap;
    transform: scaleX(.72);
    transform-origin: right center;
    margin-left: -25px;
}
.second-section {
    height: 134px;
    display: flex;
    align-items: center;
    border-bottom: 1.5px solid #A2A2A2;
}
.second-section h2 {
    width: 160px;
    font-size: 23px;
    line-height: 1.05;
}
.fruits {
    width: 140px;
    display: flex;
    flex-wrap: wrap;
}
.fruit1 {
    width: 53px;
}
.fruit2 {
    width: 58px;
}
.fruit3 {
    width: 69px;
}
.fruit4 {
    width: 64px;
}
.names {
    margin-left: 10px;
}
.names p {
    font-size: 10px;
    margin: 5px 0;
}
.third-section {
    width: 508px;
    height: 202px;
    display: flex;
    position: relative;
    border-bottom: 1.5px solid #A2A2A2;
}
.hot-spots h3 {
    position: absolute;
    left: 0;
    top: 105px;

    width: 145px;
    font-size: 22px;
    line-height: 1;
    margin: 0;
    white-space: nowrap;
}

.hot-spots > p {
    position: absolute;
    left: 135px;
    top: 107px;

    width: 100px;
    font-size: 6px;
    line-height: 1.2;
    margin: 0;
}
.squires {
    width: 214px;
    height: 88px;

    display: flex;
    align-items: flex-end;
    justify-content: space-around;
}
.spot {
    display: flex;
    align-items: flex-end;
}
.spot p {
    position: static;
    width: auto;
    font-size: 6px;
    line-height: 1;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    margin: 0 3px 0 0;
}
.squire1 {
    width: 12px;
    height: 69px;
    background-color: #EDDf00;
}
.squire2 {
    width: 12px;
    height: 61px;
    background-color: #EDDf00;
}
.squire3 {
    width: 13px;
    height: 29px;
    background-color: #EDDf00;
}
.squire4 {
    width: 12px;
    height: 13px;
    background-color: #EDDf00;
}
.squire5 {
    width: 12px;
    height: 21px;
    background-color: #EDDf00;
}
.squire6 {
    width: 12px;
    height: 9px;
    background-color: #EDDf00;
}

.circle {
    width: 268px;
    height: 202px;
    position: relative;
    padding: 0;
}
.circle img {
    position: absolute;
    left: 105px;
    top: 12px;
    width: 150px;
    height: auto;
}
.circle h3 {
    position: absolute;
    left: 0;
    top: 13px;
    width: 110px;
    font-size: 21px;
    line-height: 1.05;
    margin: 0;
}
.circle p {
    position: relative;
    top: 100px;
    width: 100px;
    font-size: 6px;
    line-height: 1.2;
    margin: 2px 0;
}
.circle .spotify {
    margin-top: 8px;
    font-size: 7px;
    font-style: italic;
}
.fangxing1 {
    width: 115px;
    height: 28px;
    background-color: #EDDF00;
}

.fangxing2 {
    width: 117px;
    height: 28px;
    background-color: #EDDF00;
}

.fangxing3 {
    width: 175px;
    height: 28px;
    background-color: #EDDF00;
}

.fangxing4 {
    width: 64px;
    height: 28px;
    background-color: #EDDF00;
}
.fourth-section {
    width: 508px;
    height: 150px;
    display: flex;
    flex-wrap: nowrap;
    border-bottom: 1.5px solid #A2A2A2;
}
.transports {
    width: 240px;
    flex-shrink: 0;
    padding-top: 4px;
}
.transport1,
.transport2,
.transport3,
.transport4 {
    height: 34px;
    display: flex;
    align-items: center;
}
.transports h4 {
    width: 55px;
    font-size: 13px;
}
.transport-text {
    margin-top: 5px;
    font-size: 7px;
    font-style: italic;
}
.restaurants {
    width: 268px;
    flex-shrink: 0;
    padding-left: 10px;
    padding-top: 4px;
}
.restaurants h4 {
    font-size: 14px;
    margin-bottom: 7px;
}
.restaurant-list {
    height: 108px;
    display: flex;
    gap: 15px;
    align-items: flex-start;
}
.restaurant-list p {
    height: 104px;
    display: flex;
    gap: 4px;
    align-items: flex-start;
    margin: 0;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 8px;
    line-height: 1;
    white-space: nowrap;
}
.restaurant-list b {
    color: #EDDF00;
    font-size: 10px;
    letter-spacing: 2px;
}
.fifth-section {
    width: 508px;
    height: 140px;
    position: relative;
    padding-top: 8px;
}
.fifth-section h5 {
    position: absolute;
    left: 2px;
    top: 0;
    width: 171px;
    font-size: 14px;
    line-height: 1.05;
    z-index: 2;
}
.fifth-section img {
    width: 507px;
    height: 90px;
    position: absolute;
    left: 2px;
    bottom: 18px;
}
.weekdays {
    position: absolute;
    left: 179px;
    right: 4px;
    bottom: 2px;
    display: flex;
    justify-content: space-between;
    font-size: 7px;
    font-weight: 700;
}
footer {
    position: relative;
    min-height: 88px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0 0;
    border-top: 1.5px solid #A2A2A2;
}
.time-block {
    display: flex;
    align-items: center;
    gap: 9px;
}
.time-block p {
    margin: 0;
    font-size: 43px;
    font-weight: 900;
    line-height: .82;
    letter-spacing: -.065em;
    white-space: nowrap;
}
.time-block small {
    font-size: 6px;
    font-weight: 700;
    line-height: 1.1;
}
.time-end {
    text-align: right;
}
.day-span {
    position: absolute;
    left: 180px;
    right: 180px;
    top: 16px;
    text-align: center;
    font-size: 6px;
    font-style: italic;
}
.day-span i {
    display: block;
    height: 1px;
    margin-top: 8px;
    background: #3A3436;
    position: relative;
}
.day-span i::before,
.day-span i::after {
    content: "";
    position: absolute;
    top: -2px;
    width: 5px;
    height: 5px;
    border-top: 1px solid #3A3436;
}
.day-span i::before {
    left: 0;
    border-left: 1px solid #3A3436;
    transform: rotate(-45deg);
}
.day-span i::after {
    right: 0;
    border-right: 1px solid #3A3436;
    transform: rotate(45deg);
}

@media (max-width: 680px) {
    body {
        padding: 20px 0;
        overflow-x: hidden;
    }

    main {
        transform: scale(calc((100vw - 24px) / 620));
        transform-origin: top center;
        margin-bottom: calc(-877px * (1 - ((100vw - 24px) / 620)));
    }
}