.auto-grid{
	 --width: 200px;
	 --gap: 1rem;
	 display: grid;
	/*grid-template-columns: repeat(auto-fill, minmax(var(--width), 1fr));
	*/
	 grid-template-columns: repeat(auto-fill, minmax(min(var(--width), 100%), 1fr));
	 gap: var(--gap);
}

.homepage{
    /* White and Beige Buttons (Beige now updating to white) */
    .button-group {
        --button-transition-timing: 150ms ease-in-out;
        --teal: #0b7886;
        .button-group .button:not(.hero__button):not(footer .button) {
            background-color: white; /* White background for buttons without hero__button class */
            color: black;
        }
        .hero__button{
                
                color: black; /* White text on hover */
        }
        .button {
            transition: 
            background-color var(--button-transition-timing), 
            color var(--button-transition-timing),
            border-color var(--button-transition-timing);
            &:hover {
                background-color: var(--teal); /* Teal background on hover */
                border-color: var(--teal);
                color: white;
            }
        }
    }
    @media (min-width: 1025px){
        .hero-container .button-group .hero__button {
            color: white;
        }
    }
    
    
    .hero-container:has(.hero__button) .button {
        text-shadow: none; /* Remove text-shadow */
    }
    .hero__control {
    	background-image: url(data:image/svg+xml;charset=utf8,%3Csvg%20fill%3D%22%23fff%22%20width%3D%2257%22%20height%3D%2257%22%20viewBox%3D%220%200%2057%2057%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20transform%3D%22translate%281%201%29%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Ccircle%20stroke%3D%22%23FFF%22%20stroke-width%3D%222%22%20fill%3D%22%232F2F2F%22%20cx%3D%2227.5%22%20cy%3D%2227.5%22%20r%3D%2227.5%22%2F%3E%3Cpath%20fill%3D%22%23FFF%22%20d%3D%22M20%2039.89V15l21%2012.444%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E);
    	display: none;
    	position: absolute;
    	top: 1rem;
    	left: 1rem;
    	width: 3rem;
    	height: 3rem;
    	background-color: #000;
    	border-radius: 50%;
    	color: #000;
    	background-size: 3rem
    }
    
    @media (min-width:64.0625em) {
    	.hero__control {
    		display: block
    	}
    }
    
    .hero__control--playing {
    	background-image: url(data:image/svg+xml;charset=utf8,%3Csvg%20fill%3D%22%23000%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2057%2057%22%3E%3Cstyle%3E.st0%7Bfill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Bfill%3A%232F2F2F%3Bstroke%3A%23FFFFFF%3Bstroke-width%3A2%3B%7D%20.st1%7Bfill%3A%23FFFFFF%3B%7D%3C%2Fstyle%3E%3Cg%20id%3D%22Homepage%22%3E%3Cg%20id%3D%22Brandeis-Advancement-Concept-1%22%3E%3Cg%20id%3D%22Group-30%22%3E%3Cg%20id%3D%22Catch-Up%22%3E%3Cg%20id%3D%22Group-34%22%20transform%3D%22translate%281%201%29%22%3E%3Ccircle%20id%3D%22Oval%22%20class%3D%22st0%22%20cx%3D%2227.5%22%20cy%3D%2227.5%22%20r%3D%2227.5%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3Cpath%20class%3D%22st1%22%20d%3D%22M18%2016h5.1v24.9H18zM33.9%2016.1H39V41h-5.1z%22%2F%3E%3C%2Fsvg%3E);
    	background-color: #fff;
    	background-size: 3rem
    }
    /* Default styles for smaller screens */
    .hero--video img {
        display: block; /* Ensure the image is visible by default */
    }
    
    .hero__video {
        display: none; /* Hide the video by default */
        width: 100%;
        height: 100%;
        background-color: #000;
        overflow: hidden;
        z-index: -1;
    }
    
    /* Styles for screens wider than 64.0625em */
    @media (min-width: 64.0625em) {
        .hero--video img {
            display: none; /* Hide the image on larger screens */
        }
    
        .hero__video {
            display: block; /* Show the video on larger screens */
        }
    }
}
/*# sourceMappingURL=custom-style.css.map */