.grid-container {
	 display: grid;
	 border-radius: 10%;
	 grid-gap: 0.63rem;
     margin-bottom: 60px;
     margin-left: 60px;
     margin-right: 60px;
     
}
 @media screen and (min-width: 28.75rem) {
	 .grid-container {
		 grid-template-columns: repeat(2, 1fr);
		 grid-template-rows: repeat(2, 1fr);
	}
}
 @media screen and (min-width: 43.75rem) {
	 .grid-container {
		 grid-template-columns: repeat(3, 1fr);
	}
	 .grid-container .grid-item:nth-child(2), .grid-container .grid-item:nth-child(3), .grid-container .grid-item:nth-child(6), .grid-container .grid-item:nth-child(7) {
		 grid-column: span 1;
	}
}
 @media screen and (min-width: 61rem) {
	 .grid-container {
		 grid-template-columns: repeat(4, 1fr);
	}
	 .grid-container .grid-item:nth-child(2), .grid-container .grid-item:nth-child(3), .grid-container .grid-item:nth-child(6), .grid-container .grid-item:nth-child(7) {
		 grid-column: span 1;
	}
}
 .grid-item {
	 background-color: #878686;
	 display: flex;
	 flex-direction: column;
	 align-items: center;
	 justify-content: flex-start;
     padding-top: 25px;
     padding-bottom: 20px;
	 color: #fff;
	 font-size: 1.2rem;
	 text-align: center;
     border-radius: 5%;
}
 .grid-item-content {
	 display: grid;
	 place-items: center;
}
 .grid-item img {
	 width: clamp(1.5rem, 40vw, 10.625rem);
	 height: clamp(1.5rem, 40vw, 10.625rem);
	 border-radius: 50%;
	 object-fit: cover;
	 transition: 0.25s ease-in-out;
}
 .grid-item h3 {
	 text-transform: capitalize;
	 font-family: "Playfair Display", serif;
	 font-optical-sizing: auto;
	 font-weight: 700;
	 font-style: normal;
	 font-size: clamp(1.25rem, 1.5477rem, 1.5rem);
	 margin: 1.1em 0 0.625rem 0;
}
 .grid-item span {
	 text-transform: uppercase;
	 display: inline-block;
	 font-size: 0.9rem;
	 color: #ffffff;
}
 .grid-item a {
	 transform: translatey(2.5em);
	 opacity: 0;
	 transition: 0.6s ease-in-out;
	 color: #111;
}
 .grid-item a svg {
	 width: 0.875rem;
	 margin-left: 0.188rem;
	 fill: #111;
}
 .grid-item.active {
	 background: #d8d6d6;
	 color: #111;
}
 .grid-item.active span {
	 color: #111;
}
 .grid-item.active img {
	 width: clamp(5rem, 60vw, 10rem);
	 height: clamp(5rem, 60vw, 10rem);
}
 .grid-item.active a {
	 opacity: 1;
}