.page-item--hardware-details {
}

    .details__main-info {
        width: calc(100% + 40px);
        margin: 0 -20px;
        padding-bottom: 25px;
    }

        .details__main-info-container {
            display: flex;
            flex-wrap: wrap;
        }

            .main-info__images,
            .main-info__caption {
                padding: 0 20px;
                width: 100%;
                box-sizing: border-box;
                max-width: calc(100vw - 32px);
            }

            .main-info__images {
                margin-bottom: 50px;
            }

                .main-info-images__main-images {
                    position: relative;
                    overflow: hidden;
                }

                    .details__main-info--recommended .main-info-images__main-images::before {
                        content: 'Aanbevolen';
                        position: absolute;
                        top: 35px;
                        right: 35px;
                        padding: .75em 3em;
                        font-size: .6em;
                        font-weight: bold;
                        background-color: rgb(233, 78, 27);
                        transform: translate(50%, -50%) rotate(45deg);
                        color: rgb(255, 255, 255);
                        text-shadow: 1px 1px 1px rgba(0, 0, 0, .4);
                        z-index: 1;
                        box-shadow: 0 0 1px rgba(0, 0, 0, .2) inset;
                    }

                    .details__main-info--recommended .main-info-images__main-images::after {
                        content: '';
                        position: absolute;
                        top: 0;
                        right: 0;
                        bottom: 0;
                        left: 0;
                        border-width: 1px;
                        border-style: solid;
                        border-image-slice: 1;
                        border-image-source: linear-gradient(-135deg, rgb(233, 78, 27) 0%, transparent 30%);
                    }

                    .main-info-images__main-image-container {
                        position: relative;
                        height: 400px;
                    }

                        .main-info-images__main-images > .main-info-images__main-image-container:not(:first-of-type) {
                            display: none;
                        }

                        .main-info-images__main-image {
                            display: block;
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            max-width: 100%;
                            max-height: 100%;
                            transform: translate(-50%, -50%);
                        }


                .main-info-images__thumbnails {
                    display: none;
                }

                    .main-info-images__thumbnail-container {
                        padding: 20px 10px 0;
                        outline: none;
                    }

                    .main-info-images__thumbnail-height-container {
                        position: relative;
                        padding-top: 75%;
                    }

                    .slick-current .main-info-images__thumbnail-height-container {
                        border: 1px solid rgb(240, 240, 240);
                    }

                        .main-info-images__thumbnail {
                            position: absolute;
                            display: block;
                            top: 50%;
                            left: 50%;
                            max-width: 80%;
                            max-height: 80%;
                            transform: translate(-50%, -50%);
                        }


            .main-info__caption {
                display: flex;
                flex-direction: column;
            }

                .main-info__subtitle {
                    margin-top: -1em;
                    margin-bottom: calc(1.5em / 1.1);
                    color: rgb(233, 78, 27);

                }

                .main-info__description {
                    margin-bottom: 2em;
                }

                .main-info__description:last-child {
                    padding-bottom: 2em;
                }

                .main-info__requirements {
                    position: relative;
                    margin-top: 2em;
                    padding-top: 2em;
                    border-top: 1px solid rgb(240, 240, 240);
                }

                    .main-info__requirements::before {
                        content: '&';
                        font-weight: 800;
                        position: absolute;
                        top: 0;
                        left: 50%;
                        font-size: 9.5em;
                        color: rgb(240, 240, 240);
                        transform: translate(-50%, -50%);
                    }

                    .main-info__requirements-title {
                        margin-bottom: .2em;
                        font-weight: 600;
                    }

                    .main-info-requirements__list {
                        list-style: none;
                        line-height: 1.2em;
                        padding: 0;
                        margin: 0;
                        font-size: .9em;
                    }

                        .main-info-requirements__list-item {
                            position: relative;
                            padding: .4em 0 .4em 1.5em;
                        }

                            .main-info-requirements__list-item-icon {
                                position: absolute;
                                color: rgb(233, 78, 27);
                                top: .5em;
                                left: 0;
                            }


                .pricing-container {
                    border-top: 1px solid rgb(240, 240, 240);
                    margin: 2em;
                    padding-top: 2em;
                }

                .main-info__add-to-quote-container {
                    margin: 0 0 2em;
                }

                    .main-info__add-to-quote-button {
                        width: 100%;
                    }

                    .details__main-info--excluded .main-info__add-to-quote-container {
                        filter: grayscale(1);
                        opacity: .25;
                    }


                .main-info__caption > *:last-child {
                    border-bottom: 1px solid rgb(240, 240, 240);
                }


    .details__navigation {
        display: none;
        border-bottom: 1px solid rgb(240, 240, 240);
        padding: .35em 0;
        margin-top: 25px;
    }

        .details-navigation-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            font-size: .9em;
            margin: 0 -2em;
        }

            .details-navigation__link {
                color: rgb(233, 78, 27);
                line-height: 2.2;
                padding: 0 2em;
            }


@media only screen and (min-width: 768px) {
}


@media only screen and (min-width: 1025px) {

    .main-info__images {
        width: 50%;
        margin-bottom: 0;
    }

        .main-info-images__main-image {
            max-height: 400px;
        }

        .main-info-images__thumbnails {
            display: block;
            margin: 0 -10px;
        }


    .main-info__caption {
        width: 50%;
    }

        .main-info__add-to-quote-container {
            order: 1;
            margin: 0;
        }

            .main-info__add-to-quote-button {
                position: relative;
                width: 100%;
                z-index: 1;
            }


        .main-info__requirements,
        .pricing-container {
            margin-left: -20px;
            margin-right: -20px;
            padding-left: 20px;
            padding-right: 20px;
        }
}