@charset "UTF-8";

image-frame {
	display: grid;
	grid-template-columns:
		[left]
		min-content
		[border-left]
		minmax( 0, 100% )
		[border-right]
		min-content
		[right]
	;
	grid-template-rows:
		[top]
		min-content
		[border-top]
		minmax( 0, 100% )
		[border-bottom]
		min-content
		[bottom]
	;
}

image-frame-content {
	position: relative;
	display: flex; flex-direction: column;
	justify-content: center; align-items: center;
}

image-frame-border {
	position: relative;
	display: flex;
}

image-frame-border[data-borderposition="tl"],
image-frame-border[data-borderposition="t"],
image-frame-border[data-borderposition="tr"]{
	grid-row-start: top;
	grid-row-end: border-top;
}

image-frame-border[data-borderposition="l"],
image-frame-content,
image-frame-border[data-borderposition="r"]{
	grid-row-start: border-top;
	grid-row-end: border-bottom;
}

image-frame-border[data-borderposition="bl"],
image-frame-border[data-borderposition="b"],
image-frame-border[data-borderposition="br"]{
	grid-row-start: border-bottom;
	grid-row-end: bottom;
}

image-frame-border[data-borderposition="tl"],
image-frame-border[data-borderposition="l"],
image-frame-border[data-borderposition="bl"]
{
	grid-column-start: left;
	grid-column-end: border-left;
}

image-frame-border[data-borderposition="t"],
image-frame-content,
image-frame-border[data-borderposition="b"]
{
	grid-column-start: border-left;
	grid-column-end: border-right;
}

image-frame-border[data-borderposition="tr"],
image-frame-border[data-borderposition="r"],
image-frame-border[data-borderposition="br"]
{
	grid-column-start: border-right;
	grid-column-end: right;
}

image-frame-border
{ position: relative; }

image-frame-content.stretch{
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
}

image-die-cut {
	max-height: 100%;
}

image-frame img {
	height: auto;
	max-width: 100%;/* max-height: 100%;*/ max-height: 550px;

}

image-frame {
	font-family: var(--font-type-sans-serif); 
	font-size: .875em; line-height: 1.25em;
	font-optical-sizing: auto;
	font-variation-settings: "wdth" 100;
	color: #bbb;
}

image-frame a,
image-frame a:hover,
image-frame a:active
{ color: #fff; }

image-frame a:visited,
image-frame a:visited:hover,
image-frame a:visited:active,
image-frame a 
{ color: #aaa; }



image-frame.comment image-frame.matte image-frame-border[data-borderposition="b"]
{
	padding-top: .75em;
	padding-left: 1.3125em;
	padding-right: 1.3125em;
	padding-bottom: 1.3125em;
}

/*/ 650px /*/
	@media (min-width: 650px){
		
		image-frame.comment image-frame.matte image-frame-border[data-borderposition="b"]{
			padding-left: 0em;
			padding-right: 0em;
		}
	}
/*/ END 650px /*/