/* Resetting some basic styles */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box; /* Ensure padding and borders are included in width/height */
}

/* Body and main container styling */
body,
html {
	height: 100%; /* Ensure body and html fill the entire height */
	display: inline-grid;
	justify-content: center;
	align-items: flex-start; /* Align content at the top */
	font-family: Arial, sans-serif;
	background-color: white;
	overflow-y: auto; /* Enable vertical scrolling for the page */
}

/* Main container using a grid layout */
.container {
	display: grid;
	grid-template-columns: repeat(4, 1fr); /* Default: 4 columns */
	gap: 20px; /* Space between pairs */
	justify-items: center; /* Center items horizontally */
	width: 100%;
	height: 100%; /* Make sure the container fills the height of the page */
	max-width: 1200px; /* Max width to ensure the container doesn't stretch too much */
	padding: 10px; /* Padding around the container */
	margin: 0; /* Remove any default margin */
	overflow-y: auto; /* Allow vertical scrolling if necessary */
	box-sizing: border-box; /* Include padding in width/height calculations */
}

/* Title styling */
.page-title {
	font-size: 2em; /* Adjust font size */
	text-align: center; /* Center the title text */
	margin-bottom: 20px; /* Add spacing below the title */
	color: #333; /* Title text color */
	font-weight: bold; /* Make the title bold */
	grid-column: 1 / -1; /* Make the title span all grid columns */
	justify-self: center; /* Center the title horizontally in the grid */
}

/* Each device pair container */
.device-pair {
	display: flex;
	flex-direction: column; /* Stack name on top of the images */
	align-items: center;
	gap: 10px; /* Space between name and the images */
	justify-content: center; /* Center the content vertically */
	padding: 10px; /* Padding around the content */
	border-radius: 10px; /* Rounded corners */
	background-color: #fff; /* White background for the container */
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow effect */
	transition: box-shadow 0.3s ease; /* Smooth transition for hover effect */
	width: 90%; /* Set width to 90% of the column */
	height: auto; /* Allow height to adjust dynamically */
	box-sizing: border-box;
}

/* Add hover effect to box shadow */
.device-pair:hover {
	box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2); /* Darker shadow on hover */
}

/* Inner container for the images */
.device-images {
	display: inline-flex; /* Align images side by side */
	align-items: flex-end; /* Align both images to the top */
	justify-content: center; /* Center images horizontally */
	gap: 5%; /* Reduce space between images to fit them properly */
	width: 100%; /* Make sure the container takes full width */
}

/* Device name styling */
.device-name {
	font-size: 1.2em;
	text-align: center;
	color: #333;
	margin-bottom: 5px; /* Space between name and images */
}

/* Computer image styling */
.device-image[alt*='Computer'] {
	width: 100%; /* Set width to 70% of the container */
	height: auto; /* Allow height to scale based on the width */
	object-fit: contain; /* Ensure the image maintains its aspect ratio */
}

/* Mobile image styling */
.device-image[alt*='Mobile'] {
	width: 40%; /* Set width to 40% of the container */
	height: auto; /* Allow height to scale based on the width */
	object-fit: contain; /* Ensure the image maintains its aspect ratio */
}

/* Add hover effect on images */
.device-image:hover {
	transform: scale(1.1); /* Slight zoom effect */
}

/* Transparent images for missing links */
.device-image[style*='opacity'] {
	opacity: 0.3; /* Make the image semi-transparent */
	pointer-events: none; /* Disable interaction */
}

/* Responsive design for smaller screens */
@media (max-width: 1200px) {
	.container {
		grid-template-columns: repeat(
			4,
			1fr
		); /* 3 columns for medium screens (tablets) */
	}
}

@media (max-width: 768px) {
	.container {
		grid-template-columns: repeat(3, 1fr); /* 3 columns for mobile screens */
	}
	.device-pair {
		max-width: 90%; /* Allow device pair to fill 90% of the column on mobile */
	}
}

@media (max-width: 500px) {
	.container {
		grid-template-columns: repeat(2, 1fr); /* 2 column for very small screens */
	}
	.device-pair {
		max-width: 100%; /* Allow device pair to fill the full width on very small screens */
	}
}