/* Reposition for smaller screens */
.logo-compact {
	display: none;
}

@media (max-width: 768px) {
	:root {
		--header-padding: 20px;
		--logo-height: 38px;
		--icon-size: 28px;
	}
	.header-links {
		gap: 10px;
	}
	
	.split {
		display: flex;
		flex-direction: column;
		height: 70vh;
	}
	
	.site-logo {
		/* 5vw means the height is 5% of the window width.
           As the window shrinks, the height shrinks.
           We use clamp to ensure it doesn't get TOO small or TOO big.
        */
        height: clamp(18px, 6vw - 8px, var(--logo-height));
        
        /* The width follows the height automatically */
        width: calc(clamp(18px, 6vw - 8px, var(--logo-height)) * (var(--logo-ratio)));
	}
	
	.panel {
		flex: 1;
		transition: flex 0.1s ease-out;
	}
	
	main {
		height: auto;
		min-height: calc(100vh - 110px);
		grid-template-rows: auto auto;
		display: block;
	}
	
	
	.panel:hover {
		flex: 1;
	}
	
	.panel:hover .bg-sprite {
		color: grey;
		transform: scale(1);
	}
	
	.panel:active .bg-sprite{
		color: white;
		transform: scale(1.05);
	}
	
	.panel:active {
		flex: 2;
		transform: scale(1.03);
	}
	
}

@media (max-width: 576px) {
	.read-more-text {
		display: none;
	}
}

@media (max-width: 415px) {
	.logo-wide {
		display: none;
	}
	
	.logo-compact {
		display: block;
		--compact-ratio: 698/48;
		height: 17px;
		width: calc(17px * var(--compact-ratio));
		
		    /* clamp(min, preferred, max) */
	    /* This makes the logo shrink on screens smaller than ~600px */
	    height: clamp(16.5px, 4.4vw, var(--logo-height));
	    
	    /* The calc trick using the variable */
	    width: calc(clamp(16.5px, 4.4vw, var(--logo-height)) * (var(--compact-ratio)));
	}
}