@media screen and (max-width: 1480px)  {
    .topMap {
        padding-top: 4.875rem;
        padding-bottom: 4.875rem;
    }

    .aboutBoxContent {
        gap: var(--gap-big);
    }
    
}

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

    .topMapContent {
        flex-direction: column;
        gap: var(--gap-s);
    }

    .aboutBoxContent {
        flex-direction: column;
        gap: var(--gap-xl)
    }

    .textContainerLeft {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--gap-xxl, 2.5rem);
    }

    .textContainerLeft h2 {
        text-align: center;
    }

    .topMap .textContainer {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--gap-xl, 2rem);
        align-self: auto;
    }

    .topMap h1, p {
        text-align: center;
    }

    .topBtns {
        justify-content:  center;
    }
        
    
}



@media screen and (max-width: 1024px)  {
    
    .topMap {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }

    .btnPrimary, .btnSecondary {
        height: 4rem;
        padding-left: var(--gap-m);
        padding-right: var(--gap-m);
    }

    .topBtns {
        gap: var(--gap-s);
    }

    .nevrLogo {
        width: 80%;

    }

    .appIcon {
        width: 4rem;
        height: 4rem;
    }

    .textStoreBtnBig {
        font-size: 0.875rem;
    }

    .textStoreBtnSmall {
        font-size: 0.625rem;;
    }

    .storeBtns .btnPrimary {
        width: 11rem;
    }
    
    .imgTop {
        max-width: 31.25rem;
        height: auto;
    }

    .hamburger {
        display: flex;
    }

    .navigation {
        display: none;
    }

    .logo {
        width: 7.25rem;
        height: 1.625rem;
    }
    
    .textContainerLeft {
        gap: var(--gap-l);
    }

    .topMap .textContainer {
        gap: var(--gap-l);
    }

}

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

    .topMapContent {
        flex-direction: column;
        gap: 0rem;
    }
    
    .lawLink {
        gap: var(--gap-m)
    }

    .socialIcon {
        display: flex;
        padding: var(--Gaps-gap-l, 1.5rem);
        align-items: center;
        gap: 0.625rem;
        border-radius: var(--radisu-m, 1rem);
    }

    .socialIconInner {
        width: 1.5rem;
        height: 1.5rem;
    }

    .socials {
        flex-direction: column;
        gap: var(--gap-s);
    }

    #download {
        gap: var(--gap-l);
    }

    .storyCard {
        width: 16.125em;
        height: 24.75rem;
        padding: var(--gap-m);
        border-radius: var(--radisu-m);
    }

    .listenStories {
        gap: var(--gap-s);
    }
    
}