/* --- Base styles --- */

/* Grid Container */
    #uf-lego-app .uf-lazy-loader .uf-tile-container {
        width: inherit !important;
        margin: 0 !important;
        display: grid !important;
        gap: var(--uf_lego_uf_ts_grid_gap) !important;
        grid-template-columns: 1fr !important;
        justify-content: center !important;
    }

/* Hub and Stream Levels - Tile Containers  */ 
    #uf-lego-app .uf-highlight-item,
    #uf-lego-app .small-highlight {
        height: inherit !important;
    }

    #uf-lego-app .uf-highlight-item article,
    #uf-lego-app .uf-highlight-item .box, 
    #uf-lego-app .small-highlight article,
    #uf-lego-app .small-highlight .box {
        height: 100% !important;
    }

    #uf-lego-app body:not(.mobile-tiles) .uf-highlight-item figure.uf-tile-thumbnail,
    #uf-lego-app body:not(.mobile-tiles) .small-highlight figure.uf-tile-thumbnail {
        height: 41% !important;
    }

    #uf-lego-app .uf-tile-wrapper,
    #uf-lego-app .uf-cta-tile {
        float: inherit !important;
        justify-content: inherit !important;
        margin: 0 !important;
    }

    #uf-lego-app .uf-tile-wrapper,
    #uf-lego-app .uf-tile-wrapper .uf-tile,
    #uf-lego-app .uf-cta-tile:not(.full-width-cta),
    #uf-lego-app .uf-cta-panel, 
    #uf-lego-app .uf-form-cta-tile:not(.full-width-cta),
    #uf-lego-app .uf-link-cta-tile:not(.full-width-cta) {
        width: var(--uf_lego_tile_base_width) !important;
        height: var(--uf_lego_tile_base_height) !important;
        margin: 0 auto !important;
    }

    #uf-lego-app body.mobile-tiles .uf-tile-wrapper,
    #uf-lego-app body.mobile-tiles .uf-tile-wrapper .uf-tile,
    #uf-lego-app body.mobile-tiles .uf-cta-tile,
    #uf-lego-app body.mobile-tiles .uf-form-cta-tile,
    #uf-lego-app body.mobile-tiles .uf-link-cta-tile {
        width: var(--tile_mobile_width) !important;
        height: var(--tile_mobile_height) !important;
        margin: 0 auto !important;
    }
    #uf-lego-app body.mobile-tiles .uf-lazy-loader .uf-tile-container {
        grid-template-columns: unset !important;
    }


    #uf-lego-app .uf-tile-wrapper .uf-tile {
        flex-grow: inherit !important;
    }

    #uf-lego-app .uf-tile-container .uf-tile-wrapper:hover .uf-tile-copy {
        position: inherit !important;
    }

/* CTA */
    #uf-lego-app .uf-form-cta-tile .uf-cta-landing-panel {
        height: 74% !important;
    }

/* Item level */
    #uf-lego-app #uf-item-page #uf-slider.uf-slider .uf-slider-track .uf-slider-list .uf-tile-wrapper:first-child {
        margin-left: 2px !important; 
    }
    #uf-lego-app #uf-item-page #uf-slider.uf-slider .uf-slider-track .uf-slider-list .uf-tile-wrapper {
        margin: 0 20px 20px 0 !important;
    }

/* Small breakpoint */
    @media only screen and (min-width: 560px) {
        #uf-lego-app .uf-stream-page .uf-description-block,
        #uf-lego-app .uf-hub-page .uf-description-block {
            margin: 40px auto !important;
        }

        /* Item level */
        #uf-lego-app #uf-item-page .container {
            max-width: calc(
                (var(--uf_lego_uf_ts_grid_tb_wide) * var(--uf_lego_tile_base_width)) +
                ((var(--uf_lego_uf_ts_grid_tb_wide) - 1) * var(--uf_lego_uf_ts_grid_gap))) !important;
        }

        #uf-lego-app body:not(.mobile-tiles) .uf-lazy-loader .uf-tile-container {
            grid-template-columns: repeat(auto-fill, minmax(var(--uf_lego_tile_base_width), 0fr)) !important;
            grid-template-rows: repeat(auto-fill, max(var(--uf_lego_tile_base_height), 0fr)) !important;
        }

        #uf-lego-app .uf-lazy-loader .uf-tile-container.small-highlight-grid {
            grid-template-rows: repeat(auto-fill, max(var(--uf_lego_tile_base_height), 0fr)) !important;
        }

        #uf-lego-app .uf-tile-wrapper,
        #uf-lego-app .uf-tile-wrapper .uf-tile,
        #uf-lego-app .uf-cta-tile,
        #uf-lego-app .uf-cta-panel, 
        #uf-lego-app .uf-form-cta-tile {
            margin: 0 !important;
        }
    }

/* Large breakpoint */
    @media only screen and (min-width: 1336px) {

        /* Item level */
        #uf-lego-app #uf-item-page .container {
            max-width: calc((var(--uf_lego_uf_ts_grid_dt_tiles_wide) * var(--uf_lego_tile_base_width)) + ((var(--uf_lego_uf_ts_grid_dt_tiles_wide) - 1) * var(--uf_lego_uf_ts_grid_gap))) !important;
        }

        
        #uf-lego-app .uf-highlight-item,
        #uf-lego-app .small-highlight {
            grid-row: span var(--uf_lego_uf_ts_grid_highlight_height) !important;
            grid-column: span min(var(--uf_lego_uf_ts_grid_highlight_width), var(--uf_lego_uf_ts_grid_dt_tiles_wide)) !important;
        }

        #uf-lego-app .uf-highlight-item,
        #uf-lego-app .uf-highlight-item .uf-tile,
        #uf-lego-app .small-highlight,
        #uf-lego-app .small-highlight .uf-tile {
            width: 100% !important;
            height: 100% !important;
            margin: 0 !important;
            max-height: calc((var(--uf_lego_uf_ts_grid_highlight_height) * var(--uf_lego_tile_base_height)) + ((var(--uf_lego_uf_ts_grid_highlight_height) - 1) * var(--uf_lego_uf_ts_grid_gap))) !important;
            max-width: calc((var(--uf_lego_uf_ts_grid_highlight_width) * var(--uf_lego_tile_base_width)) + ((var(--uf_lego_uf_ts_grid_highlight_width) - 1) * var(--uf_lego_uf_ts_grid_gap))) !important;
        }
    }

    @media (max-width: 1336px) {
        #uf-lego-app .uf-highlight-item .uf-tile h1.uf-tile-title {
            font-size: 1.9rem !important;
        }
    }


/* --- TEMP - Hot fixes --- */
    .barlowe header.hero {
        width: calc(100% - (62px * 2)) !important;
    }

    @media only screen and (min-width: 560px) {
        .barlowe header.hero {
            max-width: calc(
                (var(--uf_lego_uf_ts_grid_tb_wide) * var(--uf_lego_tile_base_width)) +
                ((var(--uf_lego_uf_ts_grid_tb_wide) - 1) * var(--uf_lego_uf_ts_grid_gap))) !important;
        }
    }

    @media only screen and (min-width: 1336px) {
        .barlowe header.hero {
            max-width: calc((var(--uf_lego_uf_ts_grid_dt_tiles_wide) * var(--uf_lego_tile_base_width)) + ((var(--uf_lego_uf_ts_grid_dt_tiles_wide) - 1) * var(--uf_lego_uf_ts_grid_gap))) !important;
        }
    }