@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');

.mobile {
    display: none !important;
}

@media screen and (max-width: 960px) {
    .mobile {
        display: flex !important;
    }

    .desktop {
        display: none !important;
    }

    .mobileColumn {
        flex-direction: column !important;
    }

    .mobileColumn > .fill {
        flex-grow: unset !important;
        width: unset !important;
    }

    .nav .h4bold {
        font-size: 14px !important;
    }

    .nav a {
        height: var(--space_xlarge);
        line-height: var(--space_xlarge);
        padding: 0 var(--space_regular);
    }

    .nav > * {
        gap: var(--space_regular);
    }

    .hero {
        padding: var(--spaceBig_xxsmall) var(--space_large) var(--spaceBig_xxxsmall);
    }

    .hero .heroImage {
        width: 100% !important;
        margin-bottom: var(--space_xlarge);
    }

    .hero .button {
        max-width: 560px;
    }

    .nav {
        top: 88px;
    }

    .scoreTable {
        width: calc(100%);
        max-width: 414px;
        box-sizing: border-box;
        min-width: unset;
    }
    
    .odullist {
        gap: var(--space_large);
    }

    .odullist .item {
        width: calc(50% - 12px);
    }

    .odullist .item .box {
        height: 140px;
    }

    .odullist .item .box img {
        width: calc(100% - 60px) !important;
    }

    .odullist .item .box img.airpods {
        width: auto !important;
        height: 80%;
    }

    .odullist .item .h4regular {
        font-size: 14px;
    }

    .odullist .item .h4semibold {
        font-size: 16px;
    }

    .detaytablo .bodysmallsemibold {
        font-size: 14px;
    }

    .detaytablo .bodysmallbold {
        font-size: 16px;
    }

    footer .button {
        flex-grow: 1;
        width: 1px;
        align-items: center;
        justify-content: center;
    }

    footer .gap_xlarge {
        gap: var(--space_medium);
    }
}

@media screen and (max-width: 410px) {
    .nav > * {
        gap: var(--space_xxsmall);
    }

    header {
        padding: var(--space_medium);
    }

    section, footer {
        padding: var(--space_xxlarge) var(--space_medium);
    }

    header .logo img {
        width: 120px !important;
    }
}