@import "dxHelpers/reset";
@import "dxHelpers/text";

:host {
    --dx-c-feature-img-box-shadow: 0 6px 30px 0 rgb(0 20 45 / 40%);
    --dx-c-feature-description-left-img-src: url("https://developer.salesforce.com/ns-assets/feature-backdrop1.svg");
    --dx-c-feature-description-max-width: 31.75rem;
    --dx-c-feature-img-margin-left: auto;
    --dx-c-feature-img-container-padding: 4rem;
    --dx-c-feature-image-max-width: 100%;
    --dx-c-feature-description-font-size: var(--dx-g-text-base);
    --dx-c-feature-description-img-width: 45%;
    --dx-c-feature-description-gap: 0;
    --dx-c-feature-description-img-gap: 0;
}

.label {
    display: inline-block;
    padding-bottom: 15px;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: normal;
    line-height: 20px;
}

.dx-text-body-2 {
    font-size: var(--dx-c-feature-description-font-size);
}

h3 {
    padding-bottom: var(--dx-g-spacing-lg);
}

section {
    display: flex;
    align-items: center;
    gap: var(--dx-c-feature-description-img-gap);
}

.description {
    display: flex;
    flex-direction: column;
    gap: var(--dx-c-feature-description-gap);
}

.description,
.image {
    width: var(--dx-c-feature-description-img-width);
}

.image {
    background-size: contain;
    background-repeat: no-repeat;
    padding: var(--dx-c-feature-img-container-padding);
}

.image img {
    box-shadow: var(--dx-c-feature-img-box-shadow);
    max-width: var(--dx-c-feature-image-max-width);
}

.body {
    max-width: var(--dx-c-feature-description-max-width);
}

.cta-button {
    display: block;
    margin-top: var(--dx-g-spacing-md);
}

.description-left {
    flex-direction: row;
}

.description-right {
    flex-direction: row-reverse;
}

.description-left .image {
    margin-left: var(--dx-c-feature-img-margin-left);
    background-image: var(--dx-c-feature-description-left-img-src);
}

.description-right .image {
    margin-right: auto;
    background-image: url("https://developer.salesforce.com/ns-assets/feature-backdrop2.svg");
}

.image-display-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: -40px;
}

.image-display-container .image-container {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-display-container .image-container > img {
    width: 71.75%;
    margin-top: -7.2%;
    margin-left: 6%;
    height: 55%;
    border-radius: 6px;
}

.image-display-container .image-display {
    width: 100%;
}

/* Mobile responsiveness */

@media screen and (max-width: 768px) {
    h3 {
        padding-bottom: var(--dx-g-spacing-md);
    }

    .body {
        max-width: unset;
    }

    .description,
    .image {
        width: 100%;
    }

    .description-right,
    .description-left {
        flex-direction: column-reverse;
    }

    .description-right .image,
    .description-left .image {
        margin: auto;
        background-image: none;
        padding: 3rem;
    }
}