content {
	height: 100%;
	text-align: left;

	.parent {
		display: grid;
		grid-template-columns: auto 1fr;
		grid-template-rows: auto;
		grid-column-gap: 0px;
		grid-row-gap: 0px;
		overflow: hidden;
		margin: 0.5em 5% 6% 0.5em;

        .gallery {
            img.project-logo {
                margin-right: 2em;
                border-radius: 0.8em;
                height: 15em;
                transition: ease-in-out 0.3s;
            }
        }


        img.project-logo:hover {
            box-shadow: 10px 10px 69px -32px rgba(0, 0, 0, 0.5);
            -webkit-box-shadow: 10px 10px 69px -32px rgba(0,0,0,0.5);
        }
	}

	.button-container {
		z-index: 1000;
		position: fixed;
		bottom: 10%;
		grid-area: 2 / 1 / 3 / 2;
		align-self: start;
		justify-self: start;
		width: 85%;

		// Create the gradient rectangle
		&::before {
			content: '';
			position: fixed;
			left: 9%;
			bottom: calc(10% - 0.96em);
			height: calc(100% + 1em); // 1em higher than the button
			height: 15%;
			width: 82%;
			pointer-events: none;
			background: linear-gradient(to top, $space-gray, transparent);
			background: -webkit-linear-gradient(to top, $space-gray, transparent);
			z-index: 1001; // Place it behind the button
		}

		button {
			display: flex;
			position: relative; // Ensure the button is above the gradient
			z-index: 1002;
			background-color: $deep-sky-blue;
			color: white;
			border: 0;
			border-radius: 0.8em;
			padding: 0.7em;
			font-size: 20px;
			font-weight: 600;
			cursor: pointer;
			transition: ease-in-out 0.1s;

			p {
				margin: 0;
				margin-left: 0.5em;
			}
		}

		button:hover {
			opacity: 0.9;
		}

		button:active {
			opacity: 0.8;
		}

		a.button {
			display: inline-block;
			text-decoration: none;
		}
	}
}
