@import url('variables.css');
.container {
    min-height: 1000px;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
}
.tools-container {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 40px;
    align-items: center;
    justify-items: center;
    justify-content: center;
	padding: 100px 0 40px;
}
.tool-tem.url {
	background: #01591d;
}
.tool-tem.qr {
	background: #466300;
}
.tool-tem.vcard {
	background: #16241b;
}
.tool-tem.catalogue {
	background: #182429;
}
.tool-tem:hover {
    transform: scale(1.1);
}
.tool-tem:hover img {
    transform: scale(1.15);
}
.tool-tem {
	transition: transform .35s ease-in-out;
	width: 100%;
    height: 100%;
    z-index: 2;
    background: #00ff51;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
    border-radius: 20px;
	min-width: 300px;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    align-content: center;
    justify-content: center;
    align-items: center;
	gap: 10px;
	cursor: pointer;
}
.tool-tem img { 
	transition: transform .55s ease-in-out;
	width: 100%;
	height: auto;
	object-fit: contain;
	max-width: 100px;
}
.tool-tem span { 
    font-family: 'Manrope Extrabold', sans-serif;
    font-size: var(--fs-subtitle);
    margin-bottom: 20px;
    font-weight: 700;
    line-height: 1.4em;
	color: var(--white-color);
}
@media (max-width: 600px) {
	.tools-container {
		grid-template-columns: 1fr;
	}
}