/*
LAYOUT: Two-Column (Right)
DESCRIPTION: Two-column fluid layout with one sidebars right of content
*/
div#content {
  margin-right: 3em;
  margin-left: 3em;
}

div.sidebar {
}

@media screen and (min-width: 600px) {

  div#content {
    margin:0 200px 0 0;
  }

  div.sidebar {
    float:right;
    overflow:hidden;
    width:180px;
  }

  div#container {
    float:left;
    margin:0 -200px 0 0;
    width:100%;
  }

  div#content {
    margin:0 200px 0 0;
  }

}

[style*="--aspect-ratio"] > :first-child {
  width: 100%;
}
[style*="--aspect-ratio"] > img {  
  height: auto;
} 
@supports (--custom:property) {
  [style*="--aspect-ratio"] {
    position: relative;
  }
  [style*="--aspect-ratio"]::before {
    content: "";
    display: block;
    padding-bottom: calc(100% / (var(--aspect-ratio)));
  }  
  [style*="--aspect-ratio"] > :first-child {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
  }  
}

div#secondary {
  clear:right;
}

div#footer {
  clear:both;
  width:100%;
}