﻿
.ld-smash-sales-students-with-devices {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    width: 100%;
}

.ld-smash-sales-students-with-devices-section {
    max-width: calc(50% - 10px);
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    align-items: stretch;
    justify-content: center;
    padding: 15px;
}

    .ld-smash-sales-students-with-devices-section div {
        background: #f6f6f6;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
        gap: 15px;
        padding: 15px;
        padding-right: 5px;
        border-radius: 10px 0 0 10px;
        justify-content: center;
        position: relative;
    }

    .ld-smash-sales-students-with-devices-section div:before {
        position: absolute;
        content: '';
        width: 25%;
        height: 100%;
        background: #f6f6f6;
        right: -25%;
        top: 0;
        border-radius: 0 10px 10px 0;
    }

    .ld-smash-sales-students-with-devices-section:nth-of-type(2) div:before,
    .ld-smash-sales-students-with-devices-section:nth-of-type(3) div:before,
    .ld-smash-sales-students-with-devices-section:nth-of-type(2) div,
    .ld-smash-sales-students-with-devices-section:nth-of-type(3) div {
        background: #fef8f0;
    }

    .ld-smash-sales-students-with-devices-section ul {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: flex-start;
        list-style: disc;
        margin-left: 15px;
    }

    .ld-smash-sales-students-with-devices-section img {
        width: calc(50px + 22vh);
        max-width: 20vw;
        position: relative;
        align-self: center;
    }


[data-section="usingSmashWith"] .ld-smash-sales-section-pf-center-f1 .ld-smash-sales-section,
[data-section="usingSmashWith"] .ld-smash-sales-section-pf-center-f1 {
    max-width: 1800px;
}

[data-section="usingSmashWith"] {
    padding-bottom: 60px;
}

#usingSmashWithCarousel-track {
    padding: 15px;
}


@media all and (max-width: 1300px) {
    .ld-smash-sales-students-with-devices-section {
        padding: 0;
    }
}

@media all and (max-width: 1000px) {

    .ld-smash-sales-students-with-devices-section img {
        width: calc(50px + 20vh);
    }
}

@media all and (max-width: 800px) {
    .ld-smash-sales-students-with-devices {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
    }

    .ld-smash-sales-students-with-devices-section {
        width: 100%;
        max-width: initial;
    }

        .ld-smash-sales-students-with-devices-section div {
            flex: 1;
        }

        .ld-smash-sales-students-with-devices-section img {
            width: calc(100px + 20vh);
            min-width: 130px;
            flex: 0 1 auto;
            max-width: 40vw;
        }

}

@media all and (max-width: 800px), all and (max-height: 800px) {

    [data-section="usingSmashWith"] {
        padding-bottom: 80px;
    }
}

@media all and (max-width: 900px) and (orientation: portrait) {

    [data-section="usingSmashWith"] {
        padding-bottom: 80px;
    }
}


@media all and (max-width: 500px) {

    .ld-smash-sales-students-with-devices {
        gap: 50px;
    }

    .ld-smash-sales-students-with-devices-section {
        flex-direction: column;
        flex-wrap: nowrap;
    }

        .ld-smash-sales-students-with-devices-section img {
            order: 1;
            width: calc(100% - 30px);
            max-width: 250px;
            margin-bottom: 5px;
        }

        .ld-smash-sales-students-with-devices-section div {
            order: 2;
            flex: 1 auto;
            padding: 15px;
        }

            .ld-smash-sales-students-with-devices-section div:before {
                display: none;
            }
}