/* =========================================
   WORDSMITH RESPONSIVE DESIGN
========================================= */

@media (max-width: 1024px) {

    .ws-hero-container {
        gap: 35px;
    }

    .ws-hero-content h1 {
        font-size: 48px;
    }

    .ws-hero-image,
    .ws-hero-image-placeholder {
        height: 380px;
    }

}

@media (max-width: 768px) {

    .ws-hero {
        padding: 75px 0 85px;
    }

    .ws-hero-container {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .ws-hero-content h1 {
        font-size: clamp(38px, 10vw, 52px);
        letter-spacing: -1px;
    }

    .ws-hero-description {
        font-size: 15px;
    }

    .ws-hero-visual {
        width: 100%;
    }

    .ws-hero-image,
    .ws-hero-image-placeholder {
        height: 350px;
    }

    .ws-badge-top {
        left: -5px;
    }

    .ws-badge-bottom {
        right: -5px;
    }

}

@media (max-width: 480px) {

    .ws-hero {
        padding: 60px 0 75px;
    }

    .ws-hero-label {
        font-size: 10px;
    }

    .ws-hero-content h1 {
        font-size: 38px;
    }

    .ws-hero-actions {
        flex-direction: column;
    }

    .ws-btn {
        width: 100%;
    }

    .ws-hero-image,
    .ws-hero-image-placeholder {
        height: 280px;
    }

    .ws-floating-badge {
        padding: 10px;
    }

    .ws-floating-badge strong {
        font-size: 11px;
    }

    .ws-floating-badge small {
        font-size: 9px;
    }

}