starryeyez024

.cont {
    width: 500px;
    display: grid;
    grid-template-columns: 50px 1fr 2fr; 
}
.foo {
    display: block;
    background: yellow;
    border: red solid 1px;
}

starryeyez024

@import "breakpoint";

@mixin clearfix($type: standard) {
    &::after {
        clear: both;
        @if $type == standard {
            content: "";
            display: table;
        } @else if $type == inline {
            content: " ";

starryeyez024

$breakpoint-zero: 0;
$breakpoint-xs-min: 480px;
$breakpoint-sm-min: 768px;
$breakpoint-md-min: 992px;
$breakpoint-lg-min: 1200px;

$breakpoint-xxs-max: $breakpoint-xs-min - 1;
$breakpoint-xs-max: $breakpoint-sm-min - 1;
$breakpoint-sm-max: $breakpoint-md-min - 1;
$breakpoint-md-max: $breakpoint-lg-min - 1;

starryeyez024

.container {
   max-width: 1200px;
   margin: auto;
   display: flex;
   flex-direction: row;
}
article {
    padding: 20px;
    background: yellow;
    flex-grow: 1;

starryeyez024

div  {
    display: flex;
}
svg {
    width: 300px;
}

starryeyez024

div  {
    display: flex;
}
svg {
    width: 300px;
}

starryeyez024

body {
  margin: 40px;
}
*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.box {
  background-color: #444;

starryeyez024

// ----
// Sass (vundefined)
// Compass (vundefined)
// dart-sass (v1.18.0)
// ----

@import "color-helpers";  

// PF CORE vars
$pfelements--red: #e00;

starryeyez024

:host([on=saturated]) {
   --pfe-broadcasted--text: #fff;
   --pfe-broadcasted--link: #fff;
   --pfe-broadcasted--link--hover: #fff;
   --pfe-broadcasted--link--focus: #fff;
}

starryeyez024

:host([pfe-color="accent"]) {
  --pfe-card--BackgroundColor: #004080;
  --theme: saturated; // in the future, this will be --context
}