/* Same illustrations, spacing, typography and numbered steps as the old template. */
.stepp-size-guide { --stepp-guide-navy: #0d243d; --stepp-guide-line: #d0d0d0; }
.stepp-size-guide *, .stepp-size-guide *::before, .stepp-size-guide *::after { box-sizing: border-box; }
.stepp-size-guide__section { margin: 0; padding: 0 0 50px; background: #fff; }
.stepp-size-guide__inner { padding-top: 100px; }
.stepp-size-guide .stepp-size-guide__heading { margin: 0 0 50px; padding: 0; color: #6d6d6d; font: 700 42px/1.3 Montserrat, sans-serif; text-align: center; }
.stepp-size-guide .stepp-size-guide__image { margin: 0; text-align: center; }
.stepp-size-guide__image img { display: block; width: auto; max-width: 100%; height: auto; margin: 0 auto; border: 0; box-shadow: none; }
.stepp-size-guide__section:nth-child(2) .stepp-size-guide__image { margin-bottom: 50px; }
.stepp-size-guide .stepp-size-guide__steps { position: relative; display: flex; align-items: stretch; justify-content: space-between; gap: 0; list-style: none; margin: 0; padding: 0; z-index: 0; }
.stepp-size-guide__steps::before { content: ""; position: absolute; top: 64px; left: 50%; transform: translateX(-50%); width: 67%; height: 3px; background: var(--stepp-guide-line); z-index: 0; }
.stepp-size-guide .stepp-size-guide__step { position: relative; z-index: 1; list-style: none; margin: 0; padding: 20px; width: 33%; }
.stepp-size-guide__step-content { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.stepp-size-guide__number { display: block; flex-shrink: 0; width: 88px; min-width: 88px; height: 88px; margin-bottom: 12px; padding: 10px; border: 10px solid #fff; border-radius: 50%; background: var(--stepp-guide-navy); color: #fff; text-align: center; font: 700 40px/48px Montserrat, sans-serif; }
.stepp-size-guide .stepp-size-guide__step p { margin: 0; padding: 0; text-align: center; font: inherit; color: inherit; }
.stepp-size-page { width: 100%; }
.stepp-size-page__hero { position: relative; padding: 10% 0; background: var(--stepp-guide-hero) bottom center / cover no-repeat fixed; }
.stepp-size-page__hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #b2b2b2 -50%, #000 100%); opacity: .5; }
.stepp-size-page__hero h1 { position: relative; width: min(100%, 1140px); margin: 0 auto; padding: 0; color: #fff; text-align: center; font: 700 66px/1.2 Montserrat, sans-serif; }
.stepp-size-guide--page .stepp-size-guide__section { padding-left: max(0px, calc((100% - 1140px) / 2)); padding-right: max(0px, calc((100% - 1140px) / 2)); }
@media (min-width: 768px) and (max-width: 1024px) {
    .stepp-size-guide__section { padding-left: 20px; padding-right: 20px; }
    .stepp-size-guide .stepp-size-guide__step { padding: 10px; }
    .stepp-size-guide__steps::before { top: 52px; }
    .stepp-size-guide__section:nth-child(2) .stepp-size-guide__inner { padding-top: 50px; }
    .stepp-size-page__hero { padding: 150px 50px; background-position: top center; background-attachment: scroll; }
}
@media (max-width: 921px) {
    .stepp-size-guide .stepp-size-guide__heading { font-size: 25px; }
    .stepp-size-page__hero h1 { font-size: 30px; }
}
@media (max-width: 767px) {
    .stepp-size-guide__section { padding: 20px; }
    .stepp-size-guide__inner { padding-top: 30px; padding-bottom: 30px; }
    .stepp-size-guide .stepp-size-guide__steps { flex-direction: column; gap: 30px; }
    .stepp-size-guide .stepp-size-guide__step { width: 100%; padding: 0; }
    .stepp-size-guide__step-content { flex-direction: row; }
    .stepp-size-guide__number { margin-bottom: 0; }
    .stepp-size-guide .stepp-size-guide__step p { flex: 1; text-align: left; }
    .stepp-size-guide__steps::before { width: 3px; height: calc(100% - 90px); top: 50%; left: 42px; transform: translateY(-50%); }
    .stepp-size-page__hero { padding: 80px 20px; background-position: top center; background-attachment: scroll; }
    .stepp-size-guide--page .stepp-size-guide__section { padding: 20px; }
}