/*cols-2 and cols-3 (cols-3 is default)*/
.container.cols-2 .colwrap {
	grid-template-areas:
	"greeting greeting"
	"col1 col2";
	grid-template-columns: 1fr 1fr;
}
.container.cols-2 .col.third-col { display: none; }

/*leftpic*/
.container.leftpic { /*by default 3 cols and search*/
	grid-template-columns: min-content min-content 3fr;
	grid-template-rows: min-content minmax(var(--min-pic-height-short), 1fr);

	grid-template-areas: 
	"search search search"
	"clock header colwrap";

	max-width: calc(var(--maxwidth) + var(--min-pic-width))
}
.container.leftpic header { 
	max-width: var(--min-pic-width);
	max-height: var(--min-pic-height);
}
.container.leftpic header img {
	width: auto;
	height: 100%;
	object-fit: cover;
	object-position: center 0;

	min-height: var(--min-pic-height);
	max-width: var(--min-pic-width);
}

/*leftpic connect requires a wholeass separate category cause its actin up*/
.container.leftpic.connect .colwrap,
.container.leftpic.connect header {
	padding: 0;
	margin: 0;
	height: 100%;
	max-height: var(--min-pic-height-short);
}
/*add padding and margin to the greeting*/
.container.leftpic.connect h1.title.greeting {
	padding: calc( var(--spacer) / 2 ) var(--spacer) calc( var(--spacer) / 2 ) var(--spacer);
	margin: var(--margin-row) var(--margin-col);
}
/*add padding to the columns*/
.container.leftpic.connect .colwrap .col:first-of-type {
	padding: 0 0 var(--spacer) var(--spacer);
}
.container.leftpic.connect .colwrap .col:last-of-type {
	padding: 0 var(--spacer) var(--spacer) 0;
}

/*connected left pic - unround stuff*/
.container.leftpic.connect header{
	border-radius: var(--border-radius);
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}
.container.leftpic.connect .colwrap {
	border-radius: var(--border-radius);
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}
/* round the top right border when conencted and leftpic cause colwrap has margin */
/*.container.leftpic.nogreeting .first-col { border-top-left-radius: var(--border-radius);}*/
.container.leftpic.nogreeting.cols-3 .third-col { border-top-right-radius: var(--border-radius) }
.container.leftpic.nogreeting.cols-2 .second-col { border-top-right-radius: var(--border-radius) }

/*2 columns leftpic*/
.container.leftpic.cols-2 { /*2 cols with search*/
	grid-template-columns: min-content min-content 2fr;
	grid-template-areas: 
	"search search search"
	"clock header colwrap";
}

/*lefpic nosearch*/
.container.leftpic.nosearch {
	grid-template-rows: minmax(var(--min-pic-height), 1fr);
	grid-template-areas: 
	"clock header colwrap";
}

.container.nolinks .colwrap {
	display: none!important;
}
.container.nolinks {
	width: min-content !important;
}
.container.nolinks.leftpic header{
	border-radius: var(--border-radius) !important;
}
.container.nolinks:not(.nosearch) .search {
    display: flex;
    align-items: center;
}
.container.nolinks .search input {
    width: 100% !important;
}