/** tips.css */



.item
{
	background-color: var(--body-color);
	padding: 1rem;
	border: 1px solid var(--text-color);
	box-shadow: 3px 3px 3px 0px rgba(0,0,0, 0.2);
}

.first-item
{
	margin-top: 3rem;
}
.itemtext
{	
	position: relative;
	height: 280px;
	overflow: hidden;
	margin-bottom: 5px;
}

.itemtext p
{
	text-align: left;
	margin-bottom: 10px;
}

.itemtext h2 
{
	text-align: center;
	padding-bottom: 10px;
}

.bottom {
	width: 100%;
	height: 150px;
	background-image: linear-gradient(
	  to bottom,
	  rgba(255, 255, 255, 0),
	  rgba(255, 255, 255, 1)
	);
	position: absolute;
	bottom: 0px;
	text-align: center;
  }

.space{
	box-sizing: border-box;
	width: 100%;
	height: 50px;
	}


hr
{
	width: 100%;
	float: right;
    height: 25px;
    border: 0;
	border-radius: 0px;
    box-shadow: inset 0 12px 12px -12px rgba(0, 0, 0, 0.8);
}


.bottom button
{
	display: block;
	width: 150px;
	height: 43px;
	font-size: .75rem;
	position: absolute;
	bottom: 5px;
	left: 50%;
	transform: translateX(-50%);
	border-radius: 10px;
	color: var(--text-color);
	background-color: var(--body-color);
	border: 2px solid var(--accent-color);
}


@media screen and (min-width:700px)
{
	.item
	{
		position: relative;
		display: grid;
		grid-template-columns: 1fr 1fr;
		background-color: var(--body-color);
		gap: 2rem;
		padding: 2rem;
		overflow: hidden;
	}

header h1
{
	font-size: 2.5rem;
}

	img
	{
		display: block;
		width: 100%;
		height: auto;
	}



	.bottom button
{
	position: absolute;
	width: 150px;
	height: 44px;
	font-size: .75rem;
	bottom: 0px;
	left: 50%;
	border-radius: 10px;
	color: var(--text-color);
	background-color: var(--body-color);
	border: 2px solid var(--accent-color);
}
}