/* Tablet and down: relax the fixed viewport sizing on the IRL info card. */
@media (max-width: 1024px) {
    .irl-content {
        width: 100%;
        height: auto;
        min-height: 100vh;
        overflow-y: auto;
        padding-bottom: 2rem;
    }

    .irl-content .l-card {
        min-width: 0;
        width: min(100%, 34rem);
        margin: 5rem auto 0 !important;
        padding: 1.25rem;
    }

    .irl-content .l-card h2 {
        font-size: clamp(1.45rem, 3vw, 1.8rem) !important;
    }

    .irl-content .l-card p {
        font-size: clamp(1rem, 2vw, 1.15rem) !important;
    }

    .irl-content .cleano {
        width: min(100%, 22rem);
    }
}

/* Phone: center the back button and make the card fully fluid. */
@media (max-width: 767px) {
    .irl-content {
        padding: 1rem 0.75rem 1.5rem;
        box-sizing: border-box;
        align-items: stretch;
    }

    .irl-content .login-btn {
        width: min(100%, 18rem);
        margin: 0 auto 1rem;
        align-self: center;
    }

    .irl-content .l-card {
        width: 100%;
        margin-top: 1rem !important;
        padding: 1rem 0.85rem;
    }

    .irl-content .l-card h2 {
        font-size: clamp(1.25rem, 6vw, 1.5rem) !important;
    }

    .irl-content .l-card p {
        font-size: 1rem !important;
    }

    .irl-content .cleano {
        width: 100%;
        font-size: 0.95rem;
    }
}

/* Small phones: trim outer spacing. */
@media (max-width: 479px) {
    .irl-content {
        padding-left: 0.6rem;
        padding-right: 0.6rem;
    }

    .irl-content .l-card {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
}