.main-section {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    text-align: center;

    color: var(--white);
    padding: 0 3.75rem;
}

.jumbotron {
    display: flex;
    flex-direction: column;
    align-items: center;

    min-height: 100vh;

    padding-top: 7.5rem;

    gap: 4rem;
}

.jumbotron .header {
    display: flex;
    flex-direction: column;

    width: 50%;
}

@media screen and (max-width: 1000px) {
    .jumbotron .header {
        width: 100%;
    }

    .app-images-carrousel .image-container .app-screen .app-image {
        padding: 0.48rem !important;
        border-radius: 1.8rem !important;
    }
}

.jumbotron .header .title {
    margin-bottom: 0.5rem;
}

.app-images-carrousel {
    position: relative;
    display: flex;
    justify-content: center;

    height: clamp(calc(var(--app-screen-max-height) * 0.5), 50vw, var(--app-screen-max-height));
}

.app-images-carrousel .image-container {
    position: relative;
    display: flex;
    justify-content: center;
}

.app-images-carrousel .image-container .app-screen {
    position: absolute;
    display: flex;
    justify-content: center;

    height: 100%;

    max-width: clamp(calc(var(--app-screen-max-width) * 0.5), 20vw, var(--app-screen-max-width));
}

.app-images-carrousel .image-container .app-screen[data-order="1"] {
    transform: scale(0.8) translateX(calc(60% / 0.8));
    transition: all 300ms ease-in-out;
    z-index: 1;
}

.app-images-carrousel .image-container .app-screen[data-order="2"] {
    z-index: 3;
    transition: all 300ms ease-in-out;
}

.app-images-carrousel .image-container .app-screen[data-order="3"] {
    z-index: 2;
    transform: scale(0.8) translateX(calc(-60% / 0.8));
    transition: all 300ms ease-in-out;
}

.app-images-carrousel .image-container .app-screen .phone-frame {
}

.app-images-carrousel .image-container .app-screen .app-image {
    position: absolute;
    width: inherit;
    height: 100%;
    padding: 0.68rem;
    border-radius: 3rem;
}

.app-images-carrousel .image-container #carrousel-prev-image {
    position: absolute;
    width: 50vw;
    height: 100%;

    transform: scale(0.8) translateX(calc(-50% / 0.8));

    z-index: 3;

    cursor: pointer;
}

.app-images-carrousel .image-container #carrousel-next-image {
    position: absolute;
    width: 50vw;
    height: 100%;
    transform: scale(0.8) translateX(calc(50% / 0.8));

    z-index: 2;

    cursor: pointer;
}

.store-badges-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
}

.store-badges-container .badges {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
}

.store-badges-container .badges .button {
    min-height: 1.8rem;
    height: 3.75rem;
}

.store-badges-container .badges .button .badge {
    height: 100%
}

.store-badges-container .badges .coming-soon-text {
    display: flex;
    align-items: center;

    padding: 0 1.5rem;
    height: 100%;
    background: linear-gradient(112.13deg, #FF8744 20%, #FF9F69 59.68%, #FF9F69 76.19%, #FFE7DA 106.14%);

    border-radius: 0.5rem;
    font-family: var(--font-family-text), sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 0;
    color: var(--tertiary);
}