@media screen and (max-width: 768px) {
    section {
        height: fit-content;
    }

    section .menu {
        display: none;
    }
    section .whole-content {
        max-width: none;
        width: 100%;
        padding: 0 16px;
    }
    section .whole-content.grid {
        display: flex;
        flex-direction: column;
    }
    .section-header {
        margin-top: 48px;
        font-size: 42px;
    }
    .section-paragraph {
        font-size: 20px;
    }
    section ol {
        margin-bottom: 32px;
    }
    section ol li {
        list-style-position: inside;
        margin-bottom: 8px;
    }
    section.hero {
        max-height: 900px;
    }
    .hero_title {
        margin-top: 116px;
    }
    .he-row {
        display: flex;
        flex-direction: column;
        padding: 0;
    }
    .he-row > div {
        margin-top: 24px;
    }
    .short_description {
        font-size: 20px;
        max-width: none;
        margin-top: none;
        text-align: center;
    }
    .he-row-signup {
        display: none;
    }
    .hero_image {
        width: 150%;
        height: auto;
        margin-top: -48px;
        pointer-events: none;
    }

    section.grid .content {
        display: flex;
        flex-direction: column;
    }
    section .content {
        padding: 0 12px;
    }

    a.mobile-signup {
        display: block;
        padding: 12px 24px;
        border-radius: 100px;
        border: 1px solid white;
        font-size: 16px;
        font-weight: 400;
        width: fit-content;
        margin: 32px auto 0 auto;
        text-decoration: none;
    }
    a.mobile-signup:focus {
        color: black;
        background-color: white;
    }
    .we-have-states .content {
        display: flex;
        flex-direction: column-reverse;
    }
    .usd_glow_map {
        width: 100%;
        position: static;
        height: auto;
        margin: 32px auto;
    }
    section.states .content {
        display: grid;
        grid-template-rows: 1fr 1fr 1fr;
        grid-template-columns: 1fr;
    }
    .state_preview-card {
        height: 100%;
        padding: 24px;
    }
    .description-card, .map-card {
        border-radius: 28px;
        padding: 24px;
        border-right: 1px solid rgba(255,255,255,0.2);
    }
    .description-card {
        height: 100%;
    }
    .map-card {
        display: none;
    }
    .mobile_buttons-card {
        display: flex;
        justify-content: center;
        background: none;
        border: none;
        border-radius: 0;
        gap: 8px;
        padding: 16px 0;
    }
    .mobile_buttons-card hr {
        border: 0.5px solid rgba(255,255,255,0.3);
    }
    .mobile_buttons-card a {
        flex-grow: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 16px;
        padding: 8px 16px;
        text-decoration: none;
    }
    .state-preview_bottom {
        z-index: 3;
    }
    .state-learn_more {
        display: none;
    }
    .mobile_buttons-card svg {
        width: 26px;
        aspect-ratio: 1/1;
        fill: white;
        flex-shrink: 0;
    }
    .state-description {
        font-size: 16px;
    }
    .state-emojis {
        display: none !important;
    }
    .state-name {
        font-size: 42px;
        top: 48px;
    }
    .states-progress_list {
        margin: 0 24px;
    }

    footer {
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        gap: 32px;
        padding: 32px;
    }

    footer .links {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
}
@media screen and (max-height: 670px) and (max-width: 768px) {
    
}