@media (max-width: 1024px){
    .page{
        padding: 64px;
    }
    #features.page{
        & .keyFeature{
            flex: 1;
        }
        & .useCase{
            max-width: calc(100% - 48px);
        }
    }
    #guide.page > .stepList{
        gap: 24px;
        & .step{
            flex: 1;
        }
    }
    #pricing.page > .card > .plans{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
        gap: 16px;
        background: none;
        max-width: 768px;
        & > .plan{
            outline: 0.5px solid #acbbcc;
            border-radius: 16px;
        }
    }
}

@media (max-width: 980px){
	#features.page{
        & .useCase{
            padding-inline: 32px;
            flex-direction: column-reverse;
            justify-content: left;
            gap: 0px;
            & .content{
                max-width: 512px;
                width: 100%;
                z-index: 2;
            }
            & img {
                max-width: none;
                width: 100%;
                height: auto;
                margin-bottom: -12%;
                mask: linear-gradient(0deg, #fff0 10%, #ffff 50%)
            }
        }
    }
}


@media (max-width: 800px){
    #features.page{
        & .keyFeatureList{
            flex-direction: column;
            gap: 24px;
            & .keyFeature{
                display: grid;
                grid-template-columns: 96px 1fr;
                grid-template-rows: auto auto;
                grid-template-areas: 
                  "icon title"
                  "icon description";
                flex: 1;
                height: 96px;
                gap: 4px;
                width: auto;
                max-width: none;
                text-align: left;
                & > .material-symbols-outlined{
                    grid-area: icon;
                }
                & > h3{
                    grid-area: title;
                    align-self: flex-end;
                    font-size: 20px;
                }
                & > p{
                    grid-area: description;
                }
            }
        }
    }
    #guide.page{
        & .stepList{
            flex-direction: column;
            gap: 24px;
            & .step{
                display: grid;
                grid-template-columns: 96px 1fr;
                grid-template-rows: auto auto;
                grid-template-areas: 
                  "icon title"
                  "icon description";
                flex: 1;
                height: 96px;
                gap: 4px;
                width: auto;
                max-width: none;
                text-align: left;
                & > h2{
                    grid-area: icon;
                    text-align: center;
                }
                & > h3{
                    grid-area: title;
                    align-self: flex-end;
                    font-size: 20px;
                }
                & > p{
                    grid-area: description;
                }
            }
        }
    }
    #hero.page{
        & .content{
            width: 100%;
            & > .text{
                width: 100%;
                & > h1{
                    white-space: unset;
                }
            }
        }
    }
}

@media (max-width: 720px){
    #contact.page > .contacts{
        flex-direction: column;
        gap: 8px;
    }
    #faq.page {
        padding-inline: 48px;
        & > .faqList {
            & > .question {
                & > .stackedText {
                    & > p.bold{
                        line-height: 120%;
                        margin-top: -2px;
                        min-height: 59px;
                        display: flex;
                        align-items: center;
                    }
                }
            }
        }
    }
    #hero.page > .content > .text > h1{
        font-size: 40px;
    }
    #hero.page > .content > .text > p{
        font-size: 18px;
    }
}

@media (max-width: 664px){
    #pricing.page > .card{
        margin: 0px;
        width: 100%;
    }
}

@media (max-width: 626px){
    .header > a{
        display: none;
    }
    #guide.page{
        padding-inline: 24px;
    }
    #features.page{
        padding-inline: 24px;
        & .useCase.gaming{
            margin-top: 0px;
        }
    }
}

@media (max-width: 599px){
    #pricing.page > .card > .plans{
        display: flex;
        flex-direction: column;
        gap: 16px;
        & > .plan{
            width: 100%;;
        }
    }
}

@media (max-width: 512px){
    #faq.page{
        padding-inline: 24px;
        padding-right: 32px;
    }
    #hero.page > .content > .text > p{
        font-size: 16px;
    }
    #hero.page{
        padding: 32px;
    }
    #hero.page > .content{
        align-items: start;
        text-align: left;
        & h1{
            text-align: left;
        }
        & p{
            text-align: left;
        }
    }
}