@media only screen and (max-width: 1024px) {
    #why-worth-mobile {
        display: block;
    }    
    #why-worth-desktop {
        display: none;
    }    
}

@media only screen and (min-width: 1025px) {
    #why-worth-mobile {
        display: none;
    }    
    #why-worth-desktop {
        display: block;
    }    
}

#why-worth.why-worth-tablet { display: none; }

#why-worth-mobile {
    padding: 50px 30px;

    h1 {
        padding: 0;
        margin: 0;
    }

    .box-wrapper {
        margin-top: 5rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .why-box {
            width: 100%;

            .box-title {                
                border-bottom: 3px solid #000;
                padding-bottom: 2rem;
                display: flex;

                h2 {
                    font-size: 4rem;
                    flex-grow: 3;
                    line-height: 5rem;
                }

                div {
                    flex-grow: 2;
                    flex-basis: 40%;
                }
            }

            .box-description {
                margin: 5rem auto;
            }
        }
    }
}

#why-worth-desktop {
    padding-bottom: 50px;

    h1.title {
        padding: 0;
        margin: 0 auto;
    }

    .box-wrapper {
        flex-direction: row;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin: 5rem 0;

        .why-box {
            width: 48%;
            position: relative;

            .left-bracket {
                width: 100%;
                height: 100%;
                position: absolute;
                background-image: url("../../images/core/why-worth-left-bracket.png");
                background-position: left 0 top 0;
                background-size: contain;
                background-repeat: no-repeat;
                left: -6rem;
            }
            
            .right-bracket {
                width: 100%;
                height: 100%;
                position: absolute;
                background-image: url("../../images/core/why-worth-right-bracket.png");
                background-position: right 0 top 0;
                background-size: contain;
                background-repeat: no-repeat;
                right: -6rem;
            }

            .right-top-plus {
                width: 10rem;
                height: 10rem;
                position: absolute;
                background-image: url("../../images/core/why-worth-plus.png");
                background-position: right 0 top 0;
                background-size: contain;
                background-repeat: no-repeat;
                right: -6rem;
                top: -6rem;
            }

            .left-bottom-plus {
                width: 10rem;
                height: 10rem;
                position: absolute;
                background-image: url("../../images/core/why-worth-plus.png");
                background-position: left 0 bottom 0;
                background-size: contain;
                background-repeat: no-repeat;
                left: -6rem;
                bottom: -6rem;
            }

            .box-title {
                text-align: center;
                padding-bottom: 0;
                border-bottom: 2px solid #000;
                margin-bottom: 2rem;
            }

            .box-description {
                margin-bottom: 4rem;
            }
        }
    }
}