Our essentials range includes all the recognised big brands, without the big price tag
We focus on stocking products from companies who give back to the community and those with ethical environmental practices.
As a proud member of Countrywide, the largest, national group of independent wholesale food service distributors, we have access to some of Australia’s most established brands at competitive pricing. By purchasing Essentials through Two Providores, our customers also gain access to the Countrywide Rewards Program.
Find out more or check out our monthly Countrywide specials.
@import “../../css/global/index”;
.featured-brands-wrapper {
margin: {
left: unset;
right: unset;
}
@include breakpoint-up(md) {
margin: {
top: property(spacer-lg);
bottom: property(spacer-lg);
}
}
@include breakpoint-down(md) {
overflow: hidden;
}
}
.featured-brands {
overflow: hidden;
@include grid(property(spacer-md), repeat(6, 1fr));
@include breakpoint-down(xl) {
@include grid(property(spacer-md), repeat(4, 1fr));
}
@include breakpoint-down(lg) {
@include grid(property(spacer-md), repeat(3, 1fr));
}
@include breakpoint-down(md) {
@include grid(property(spacer-md), repeat(2, 1fr));
}
&–desktop {
@include breakpoint-down(lg) {
@include hidden;
}
}
&–mobile {
@include breakpoint-up(lg) {
@include hidden;
}
@include flex(row, flex-start, stretch, property(spacer-md));
overflow: unset;
max-width: calc(100vw – #{property(spacer-xl)});
li {
@include grid(property(spacer-md));
flex: 0 0 40%;
}
}
&__item {
background-color: color(white-000);
display: flex;
a {
width: 100%;
aspect-ratio: 1/1;
border: 1px solid color(grey-000);
transition: border property(transition);
padding: property(spacer-lg);
position: relative;
@include breakpoint-down(md) {
padding: property(spacer-md);
}
@supports (aspect-ratio: auto) {
@include flex(row, center, center, null);
}
// fallback
@supports not (aspect-ratio: auto) {
padding-top: 100%;
height: 0;
position: relative;
overflow: hidden;
}
&:hover {
border-color: color(black-000);
// .featured-brands__star {
// fill: color(black-000);
// }
}
}
img {
max-width: 100%;
// object-fit: contain;
// max-width: 100%;
// width: 100%;
// height: 100%;
// fallback
@supports not (aspect-ratio: auto) {
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
width: auto;
max-width: 100%;
height: auto;
}
}
}
&–small a {
padding: property(spacer-md);
}
.embla {
position: relative;
&:before {
content: ‘{ “slidesToScroll”: 2.5 }’;
}
}
.featured-brands__star {
fill: color(grey-000);
width: property(spacer-md);
height: property(spacer-md);
position: absolute;
top: property(spacer-md);
left: property(spacer-md);
transition: property(transition);
}
}