.share-modal.inner {
    padding: 0;
    max-width: 750px;
    display: flex;
    flex-direction: column;
    align-items: center;

    & h1 {
        font-weight: normal;
        font-size: var(--font-size-xxl);
    }

    & p {
        margin-top: 10px;
        max-width: 520px;
        font-size: var(--font-size-lg);
        font-style: italic;
        font-weight: 300;
    }

    @media (--xs-down) {
        & .image-container {
            margin-bottom: 10px;
            width: 100%;
            height: 190px;
            background: url('./wave-grey.svg') no-repeat;
            background-size: 100% 100%;
        }

        & .mars {
            margin-top: 10px;
            height: 90%;
        }
    }

    @media (--sm-up) {
        & .image-container {
            margin-bottom: 23px;
            width: 100%;
            height: 370px;
            background: url('/img/wave.svg') no-repeat;
            background-size: 100% 75%;
            background-position-y: top;
            display: flex;
            justify-content: center;
            align-items: flex-end;
        }

        & .mars {
            margin-bottom: 20px;
            max-width: 180px;
        }
    }

    & .share-buttons {
        position: relative;
        top: 44px;
        border-radius: 35px;
        padding: 0 30px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        background: var(--black);

        & .share-button {
            margin: 16px 20px;
            height: 24px;
            position: relative;
            bottom: 2px;
        }
    }
}
