.outer-grid {
display: flex;
  flex-direction: row;
	flex-wrap: wrap;
  justify-content: center!important;
	margin: -8px;
  align-items: center;
  gap: 2px;
	width: 100vw;
	max-width: 100vw;
	position: fixed;
	bottom: 1.6vh;
}

.container {
  padding: 4px;
  border: 1px solid white;
	border-radius: 2px;
	min-width: 245px;
	max-width: 245px;
	min-height: 24px;
	max-height: 24px;
	width: fit-content;
	height: fit-content;
	text-align: center;
	place-content: center;
	background-color: rgba(46, 204, 113, 0.75);

	box-shadow: 0 1em 2em -1em rgba(0, 0, 0, 0.5);
}
.container:hover{
	background-color: rgba(46, 204, 113, 0.9);
	
}
.title {
}

.button {
  display: inline-block;
  padding: 1px;
  background-color: #2ECC71;
  border: 1px solid #2DA7CC;
}

/* flex/grid properties */
.container {

}

.title,
.description {

}

.button {

}

@media (max-width: 810px) and (orientation: landscape){
.outer-grid {
  flex-direction: row;
}
	.container {
	min-width: 388px;
	max-width: 388px;
	min-height: 18px;
	max-height: 18px;
	}
}
@media (max-width: 768px) and (orientation: landscape) {
	.outer-grid {
  flex-direction: row;
}
	.container {
	min-width: 388px;
	max-width: 388px;
	min-height: 18px;
	max-height: 18px;
	}
}
@media (max-width: 480px) {
.outer-grid {
  flex-direction: column;
}
	.container {
	min-width: 245px;
	max-width: 245px;
	}
}