main{
   width: 80svw;
   margin: var(--gap) auto;
}

h1{
	text-align: center;
}

/*..........................

		shadows

..........................*/

h1{
	filter: var(--drop-shadow-medium);
}

.texture{
	box-shadow: var(--shadow-elevation-medium);
}

.texture > div >*{
	filter: var(--drop-text-shadow);
}

/*..........................

	   cute box :+)

..........................*/

.texture{
	--size: 18svw;
	display: grid;
      grid-template-columns: 1fr var(--size);
      grid-template-rows: var(--size);
		grid-template-areas: 'main img';
		gap: 1em;
		align-items: stretch;
		align-content: space-between;
	margin: calc(2 * var(--gap)) auto;
}

/*..........................

	main textbox

..........................*/

.hugme{
	grid-area: main;
	padding: 0.25em 0.5em!important;
	height: var(--size);
}

.texture :not(p){
   text-align: center;
}

.texture p{
	max-width: 55ch;
}

h2{
	margin-top: 0.5em;
}

/*..........................

		preview image!!!

..........................*/

.img{
	grid-area: img;
	display: flex;
		align-items: center;
		justify-content: center;
	padding: 0.25em!important;
}

.img img{
	max-width: 100%;
	max-height: 100%;
   object-fit: contain;
}

.img img{
	border-radius: var(--border-radius-level-3);
}