.app2app-promo-view {
    max-width: 1024px;
    margin:auto;
    display:block;
    width: 100vw;
    height: 100vh;
}

.app2app-promo-view .promo-content {
    display: grid;
    grid-template-areas:
        "image controls"
        "image body";
    grid-template-columns: 1fr auto;
    grid-template-rows: auto 1fr;
}

.app2app-promo-view .promo-image {
    grid-area: image;
    margin-right: 20px;
    min-width: 140px
}

.app2app-promo-view .promo-image img,
.app2app-promo-view .promo-image svg {
    object-fit: contain;
    width: 100%
}

.app2app-promo-view .promo-controls {
    grid-area: controls;
    padding: 10px 10px 10px 0px;
    justify-self: end;
}

.app2app-promo-view .promo-body {
    grid-area: body;
    max-width: 500px;
    min-width: 290px
}

.app2app-promo-view .promo-title {
    font-size: 24px;
    font-weight: 500;
    line-height: 39px;
    padding: 16px;
}

.app2app-promo-view .promo-subtitle {
    font-size: 18px;
    font-weight: 700;
    line-height: 30px;
    padding: 18px 16px;
    color: var(--text-medium);
}

.app2app-promo-view .promo-body-button {
    padding: 20px;
}

.app2app-promo-view .promo-body-content {
    padding: 0px 15px 15px 45px;
    font-size: 14px;
}


@media only screen and (max-width: 480px) {
    .app2app-promo-view .promo-content {
        grid-template-areas:
            "image controls"
            "body body";
        grid-template-columns: 1fr auto;
        grid-template-rows: auto 1fr;
    }
    .app2app-promo-view .promo-image {
        min-width: 0px;
    }

    .app2app-promo-view .promo-body {
        min-width: 0px;
    }

    .app2app-promo-view .promo-body-button {
        padding: 20px;
    }
}