7-homepage-rows edit

homepage-programs  edit

Ambient video of scenes of life at William & Mary

Explore William & Mary's Academic Programs

To be a W&M student is to think critically and express yourself creatively, to question and to innovate. From our state-of-the-art science labs to the new, expansive Arts Quarter, W&M has a well-earned reputation for delivering a world-class education.

Copy
Edit
<!-- components/7-homepage-rows/homepage-programs.php --> <section class="HomePrograms wm-row"> <div class="wm-row__mainWrapper"> <div class="wm-row__mainWrapper wm-split__container h-switch"> <div class="wm-split__side -image"> <img class="HomePrograms__image" alt="Ambient video of scenes of life at William &amp; Mary" src="https://education.wm.edu/_homepage/_media/2024-grad-group-of-7.jpg"> </div> <div class="wm-split__side HomePrograms__side wm-text -text"> <h3 class="wm-row__title ">Explore William & Mary's Academic Programs</h3> <div class="wm-row__intro-text"> <p>To be a W&M student is to think critically and express yourself creatively, to question and to innovate. From our state-of-the-art science labs to the new, expansive Arts Quarter, W&M has a well-earned reputation for delivering a world-class education.</p> </div> </div> </div> </div> </section>
Copy
Copy
Edit
/* scss/7-homepage-rows/_homepage-programs.scss */ .HomePrograms { &__side.-text { text-align: left; align-items: flex-start; width: 100%; @include breakpoint($mobile-to-wide-mobile-breakpoint) { padding-left: 50px; // backup value for older browsers padding-left: clamp(22px, 7%, 70px); padding-right: 0; } } } .wm-row .h-switch .HomePrograms__side.-text { padding-left: 0; padding-right: 50px; padding-right: clamp(22px, 7%, 70px); }