/* START TABLET */
@media only screen and (max-width: 991px) {
    .grid-sm, .grid-md {
        grid-template-columns: repeat(1, 1fr);
    }
}
/* END TABLET */

/* START MOBILE */
@media only screen and (max-width: 767px) {
:root {
    /* spacings */
    --section-padding: 56px;
    --space-section: 24px;

    --space-xxxl: 44px;
    --space-xxl: 36px;
    --space-xl: 28px;
    --space-lg: 20px;
    --space-md: 12px;
    --space-sm: 6px;
    --space-xs: 2px;

    /* other */
    --b-radius-base: 6px;
    --b-radius-screen: 16px;
    --b-radius-cta: 16px;
    --height-logo: 32px;
    --big-item: 42px;
    --icon--md: 42px;
    --screen-shadow: 0px 4px 56px 12px rgba(0, 0, 0, 0.25);

    /* controls */
    --btn-padding: 14px 20px;

    /* text */
    --font-xl: 20px;
    --font-lg: 17px;
    --font-md: 14px;
    --font-sm: 10px;

    /* titles */
    --title-h1: 36px;
    --title-h2: 28px;
    --title-h3: 20px;
    --title-h4: 18px;
    --title-h5: 16px;
    --title-h6: 14px;
}

/* btns and controls */
section.hero{
    padding-top: calc(var(--section-padding) * 1.5);
}

.btn-group-horiz{
    flex-direction: column;
    gap: var(--space-md);
}

.logo-list-wrapper,
.solution{
    align-items: flex-start;
}

.logo-list{
    gap: var(--space-lg);
    justify-content: flex-start;
}

.solution p{
    text-align: left;
}

.form{
    padding-bottom: var(--space-md);
}

.screen-wrapper--right,
.screen-wrapper--left{
    margin: var(--space-xxl) 0;
    justify-content: center;
    width: 100%;
    height: 100%;
}
    .screen-wrapper--right img,
    .screen-wrapper--left img{
        object-fit: cover;
        width: 100%;
    }

.accordion-button, 
.accordion-button:not(.collapsed){
    padding: var(--space-lg) 0;
}

nav.navbar{
    padding: 0;
}

nav.navbar .btn--link,
footer .btn--link{
    font-size: var(--font-sm);
}

.btn.btn--link img{
    height: var(--space-md);
}

.logo{
    max-width: 40vw;
    min-width: 140px;
}
    .logo img{
        object-fit: contain;
        width: 100%;
    }

footer .p--copyright{
    text-align: center;
    font-size: var(--font-sm);
}

footer .container-fluid{
    justify-content: center !important;
    flex-direction: column;
}

footer .logo {
    width: 200px;
    max-width: 50vw;
}

footer.navbar{
    padding-bottom: var(--space-xxxl);
}

/* END MOBILE */
}