/* BLOCK: App Hero */

.block-app-hero .text-content {
    text-align: center;
    max-width: 63.75rem;
    margin-inline: auto;
}

.block-app-hero .text-content:not(:first-child) {
    margin-top: 3.75rem;
}

.block-app-hero .text-content > p {
    max-width: 50rem;
    margin-inline: auto;
}

.block-app-hero .main-wrapper {
    display: flex;
    gap: 1.25rem;
    align-items: center;
    isolation: isolate;
}

.block-app-hero .main-wrapper:not(:first-child) {
    margin-top: 6.25rem;
}

.block-app-hero .main-wrapper:not(:last-child) {
    margin-bottom: 6.25rem;
}

.block-app-hero .main-image-wrapper {
    flex-basis: 32.3%;
}

.block-app-hero .main-image-wrapper img {
    position: relative;
    width: 100%;
    height: auto;
    filter: drop-shadow(0rem 0.75rem 1.875rem rgb(from var(--c-text-dark) r g b / .5));
    z-index: -1;
}

.block-app-hero .images-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.block-app-hero .left-images {
    align-items: flex-end;
}

.block-app-hero .right-images {
    align-items: flex-start;
}

.block-app-hero .image-wrapper {
    width: var(--width, 100%);
    border-radius: 1.5625rem;
    overflow: hidden;
}

.block-app-hero .image-wrapper.height--small {
    height: 9rem;
}

.block-app-hero .image-wrapper.height--medium {
    height: 12.5rem;
}

.block-app-hero .image-wrapper.height--large {
    height: 16.875rem;
}

.block-app-hero .image-wrapper.image--contain img {
    object-fit: contain;
}

.block-app-hero .cta-buttons {
    justify-content: center;
}

.block-app-hero .cta-buttons:not(:first-child) {
    margin-top: 3.75rem;
}

@media screen and (width <= 1024px) {
    .block-app-hero .main-wrapper {
        gap: 0.75rem;
    }

    .block-app-hero .main-image-wrapper {
        flex-basis: 25%;
    }

    .block-app-hero .images-list {
        gap: 0.75rem;
    }
    
    .block-app-hero .image-wrapper {
        border-radius: 0.5625rem;
    }

    .block-app-hero .image-wrapper.height--small {
        height: 5rem;
    }

    .block-app-hero .image-wrapper.height--medium {
        height: 7.5rem;
    }

    .block-app-hero .image-wrapper.height--large {
        height: 12rem;
    }
}

@media screen and (width <= 620px) {
    .block-app-hero .text-content,
    .block-app-hero .text-content > p {
        max-width: unset;
    }

    .block-app-hero .text-content:not(:first-child) {
        margin-top: 2.5rem;
    }

    .block-app-hero .main-wrapper:not(:first-child) {
        margin-top: 3.125rem;
    }

    .block-app-hero .main-wrapper:not(:last-child) {
        margin-bottom: 3.125rem;
    }

    .block-app-hero .main-image-wrapper {
        flex-basis: 43.3%;
    }

    .block-app-hero .main-wrapper {
        margin-inline: calc(-1 * var(--offset, 0px));
    }

    .block-app-hero .image-wrapper {
        width: calc(100% - 0.75rem);
    }

    .block-app-hero .image-wrapper.height--small {
        height: 3.75rem;
    }

    .block-app-hero .image-wrapper.height--medium {
        height: 5.3125rem;
    }

    .block-app-hero .image-wrapper.height--large {
        height: 8.4375rem;
    }

    .block-app-hero .image-wrapper.width--small {
        width: calc(100% - 1.25rem);
    }

    .block-app-hero .image-wrapper.width--full {
        width: 100%;
    }

    .block-app-hero .left-images .image-wrapper.width--full {
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
    }

    .block-app-hero .right-images .image-wrapper.width--full {
        border-top-right-radius: 0px;
        border-bottom-right-radius: 0px;
    }

    .block-app-hero .cta-buttons:not(:first-child) {
        margin-top: 2.5rem;
    }
}