@media screen and (max-width: 839px) {

    .headline, .form, .recommendations, .footer {
        width: auto;
        max-width: 100%;
        margin: 0 25px;
    }
    .banner {
        width: 100%;
        grid-template-areas:
        'logo'
        'frame'
        'text';
        grid-template-columns: 1fr;
        padding: 0 25px;
    }
    .banner .frame, .banner .text {
        max-width: 310px;
    }

    .headline {
        padding-top: 15px;
    }
    .headline p {
        font-size: 20px;
        line-height: normal;
    }
    
    .headline span {
        font-size: 50px;
        line-height: normal;
    }

    .form {
        padding: 35px 25px;
    }
    .form #mainForm {
        display: grid;
        grid-template-columns: 2fr 1fr 1fr;
        grid-template-areas:
        'form_text form_inputs form_inputs'
        'form_text audio audio'
        'form_text ebook ebook'
        'form_text error_wersja error_wersja'
        'zgody zgody zgody'
        'btn btn btn';
    }
    .form #mainForm h4 {
        font-size: 22px;
    }
    .form #mainForm h5 {
        font-size: 16px;
    }

    .recommendations .box {
        padding: 25px;
    }

}

@media screen and (max-width: 680px) {

    body {
        font-size: 12px;
    }
    
    .headline {
        padding-top: 0px;
    }
    .headline p {
        font-size: 18px;
    }
    .headline span {
        font-size: 40px;
    }

    .form {
        padding: 25px 25px;
    }
    .form #mainForm {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
        'form_text form_text'
        'form_inputs form_inputs'
        'audio ebook'
        'error_wersja error_wersja'
        'zgody zgody'
        'btn btn';
    }
    .form #mainForm .text {
        padding-right: 0px;
        padding-bottom: 25px;
    }
    .form #mainForm p.size11 {
        padding-left: 0px;
    }

    .recommendations {
        flex-direction: column;
        gap: 25px;
    }
    .recommendations .box {
        width: 100%;
    }

}


@media screen and (max-width: 575px) {

    .headline p {
        font-size: 16px;
        padding-top: 0px;
        padding-bottom: 20px;
    }
    .headline span {
        font-size: 30px;
    }

    .form #mainForm h4 {
        font-size: 20px;
    }
    .form #mainForm h5 {
        font-size: 14px;
    }

    .form #mainForm .btn {
        max-width: 300px;
        font-size: 18px;
        padding: 15px 0 18px 0;
    }
    
    .button {
        font-size: 60px;
        line-height: 30px;
        top: 10px;
        right: 10px;
    }
    .popup-inner h5 {
        padding: 20px 20px 15px 20px;
    }
    .popup-inner ol {
        padding: 10px 35px;
    }
    .popup-inner ul {
        padding-left: 25px;
    }

}

@media screen and (max-width: 490px) {

    .form #mainForm {
        grid-template-columns: 1fr;
        grid-template-areas:
        'form_text'
        'form_inputs'
        'audio'
        'ebook'
        'error_wersja'
        'zgody'
        'btn';
    }

}

@media screen and (max-width: 380px) {



}