.light.first_section {
                padding-bottom: 100px;
            }

            /* The `#1d1c1c !important` fill is unchanged and dark mode renders
               exactly as before — it is simply no longer applied when the light
               theme is active, so assets/css/tbtk-graphic-design-light.css can
               paint this section like it already does for the sibling
               /portfolio/portfolio-website page. */
            html:not([data-tk-theme="light"]) .light.first_section {
                background: #1d1c1c !important;
            }

            .portfolio-logo-actions {
                margin-bottom: 25px;
                text-align: center;
            }

            .portfolio-logo-reference-gallery {
                width: 100%;
                overflow: hidden;
            }

            .portfolio-logo-reference-slider {
                position: relative;
                margin-bottom: 10px;
                overflow: hidden;
            }

            .portfolio-logo-reference-slider .swiper-slide {
                display: flex;
                align-items: center;
                justify-content: center;
                height: 170px;
                min-height: 170px;
                overflow: hidden;
            }

            /* Tile behind each logo. The artwork itself is object-fit: cover and
               covers this completely once loaded — this only shows while an
               image is still decoding, so it follows the theme instead of
               flashing near-black on the light page. No portfolio image is
               altered. */
            html:not([data-tk-theme="light"]) .portfolio-logo-reference-slider .swiper-slide {
                background: #111;
            }

            html[data-tk-theme="light"] .portfolio-logo-reference-slider .swiper-slide {
                background: #EDF1F4;
            }

            .portfolio-logo-reference-slider .swiper-slide img {
                width: 100%;
                height: 170px;
                object-fit: cover;
                object-position: center;
            }

            @media (min-width: 768px) {
                .portfolio-logo-actions .button.main-green {
                    margin: 10px 4px 30px !important;
                }
            }

            @media (max-width: 767px) {
                .first_section {
                    padding-top: 95px !important;
                }

                .entry-header {
                    padding-top: 50px !important;
                }

                .portfolio-logo-actions .button.main-green {
                    margin: 10px 3px 30px !important;
                    padding: 10px 21px !important;
                }

                .mobbig.main-title {
                    font-size: 32px !important;
                    text-align: center;
                }

                .portfolio-logo-reference-slider {
                    padding: 0 10px;
                }

                .portfolio-logo-reference-slider .swiper-slide,
                .portfolio-logo-reference-slider .swiper-slide img {
                    height: 150px;
                    min-height: 150px;
                }
            }