$featured-browse-category-border-color: $legend-border-color; $featured-browse-category-caption-color: $gray-lighter; // Large desktop $featured-browse-category-margin-large-desktop: 15px; $no-sidebar-large-desktop-large-image-width: floor(($container-large-desktop)/ 3) - $featured-browse-category-margin-large-desktop; $no-sidebar-large-desktop-medium-image-width: floor(($container-large-desktop)/ 5) - $featured-browse-category-margin-large-desktop; $with-sidebar-large-desktop-width: floor($container-large-desktop - ($container-large-desktop)/ 4); // sidebar space to remove $with-sidebar-large-desktop-large-image-width: floor(($with-sidebar-large-desktop-width)/ 2) - ($featured-browse-category-margin-large-desktop * 2); $with-sidebar-large-desktop-medium-image-width: 265px; // Desktop $featured-browse-category-margin-desktop: 20px; $no-sidebar-desktop-large-image-width: floor(($container-desktop)/ 3) - $featured-browse-category-margin-desktop; $with-sidebar-desktop-width: floor($container-desktop - ($container-desktop)/ 4); // sidebar space to remove $with-sidebar-desktop-large-image-width: floor(($with-sidebar-desktop-width)/ 2) - ($featured-browse-category-margin-desktop * 2); $with-sidebar-desktop-medium-image-width: floor(($with-sidebar-desktop-width)/ 3) - ($featured-browse-category-margin-desktop); // Tablet $featured-browse-category-margin-tablet: 20px; $no-sidebar-tablet-large-image-width: floor(($container-tablet)/ 3) - $featured-browse-category-margin-tablet; $with-sidebar-tablet-large-image-width: floor(($container-tablet)/ 2) - ($featured-browse-category-margin-tablet * 2); // Extra small $no-sidebar-xs-image-width: 190px; $with-sidebar-xs-image-width: $no-sidebar-xs-image-width; // Height adjustments $aspect-ratio-factor-large-image: 0.75; // 4:3 width:height $aspect-ratio-factor-medium-image: 1; // 1:1 width: height .browse-category { background-size: cover; background-position: center; border: 2px solid $featured-browse-category-border-color; border-radius: $border-radius-large; position: relative; float: left; background-repeat: no-repeat; .category-caption { color: $featured-browse-category-caption-color; position: absolute; bottom: $line-height-computed; text-align: center; text-shadow: 0 1px 0 #000000; width: 100%; } .category-title { font-size: $font-size-large; line-height: 1.2; margin: 0; padding: $table-condensed-cell-padding; } .item-count { font-size: $font-size-base; text-transform: uppercase; } } [data-sidebar="false"] { &.categories-1, &.categories-2, &.categories-3 { .browse-category { width: $no-sidebar-xs-image-width; height: $no-sidebar-xs-image-width * $aspect-ratio-factor-large-image; @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) { width: $no-sidebar-tablet-large-image-width; height: $no-sidebar-tablet-large-image-width * $aspect-ratio-factor-large-image; } @media (min-width: $screen-md-min) and (max-width: $screen-md-max) { width: $no-sidebar-desktop-large-image-width; height: $no-sidebar-desktop-large-image-width * $aspect-ratio-factor-large-image; } @media (min-width: $screen-lg-min) { width: $no-sidebar-large-desktop-large-image-width; height: $no-sidebar-large-desktop-large-image-width * $aspect-ratio-factor-large-image; } } } &.categories-4, &.categories-5 { .browse-category { width: $no-sidebar-large-desktop-medium-image-width; height: $no-sidebar-large-desktop-medium-image-width * $aspect-ratio-factor-medium-image; @media (max-width: $screen-xs-max) { width: $no-sidebar-xs-image-width; height: $no-sidebar-xs-image-width * $aspect-ratio-factor-medium-image; } } .category-4 { @extend .hidden-sm; } .category-5 { @extend .hidden-md; @extend .hidden-sm; } } } [data-sidebar="true"] { &.categories-1, &.categories-2 { .browse-category { width: $with-sidebar-xs-image-width; height: $with-sidebar-xs-image-width * $aspect-ratio-factor-large-image; @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) { width: $with-sidebar-tablet-large-image-width; height: $with-sidebar-tablet-large-image-width * $aspect-ratio-factor-large-image; } @media (min-width: $screen-md-min) and (max-width: $screen-md-max) { width: $with-sidebar-desktop-large-image-width; height: $with-sidebar-desktop-large-image-width * $aspect-ratio-factor-large-image; } @media (min-width: $screen-lg-min) { width: $with-sidebar-large-desktop-large-image-width; height: $with-sidebar-large-desktop-large-image-width * $aspect-ratio-factor-large-image; } } } &.categories-3, &.categories-4, &.categories-5 { .browse-category { width: $with-sidebar-desktop-medium-image-width; height: $with-sidebar-desktop-medium-image-width * $aspect-ratio-factor-medium-image; @media (max-width: $screen-xs-max) { width: $with-sidebar-xs-image-width; height: $with-sidebar-xs-image-width * $aspect-ratio-factor-medium-image; } @media (min-width: $screen-lg-min) { width: $with-sidebar-large-desktop-medium-image-width; height: $with-sidebar-large-desktop-medium-image-width * $aspect-ratio-factor-medium-image; } } } .category-4, .category-5 { display: none; } }