/* ============================================================================
   LANDING-PAGE-ONLY SECTIONS — Feature Banner / Latest News / Tutorial.
   Scoped under .vshs-ui-01 so every rule is namespaced and can never collide
   with the shared design system in styles.css, no matter what class names
   are reused. Kept in its own file (not merged into styles.css) since these
   three sections only ever appear on this one page.
   ============================================================================ */
.vshs-ui-01 {
   --vshs-blue: #002147;
   --vshs-blue-dark: #001a38;
   --vshs-blue-light: #174b9b;
   --vshs-heading: #17428a;
   --vshs-cyan: #18bde9;
   --vshs-orange: #e87524;
   --vshs-yellow: #f3df39;
   --vshs-white: #fff;
   --vshs-page: #f5f4f2;
   --vshs-text: #002147;
   --vshs-border: #c8cdd3;
   --vshs-radius: 6px;
   --vshs-side-space: 32px;
   --vshs-transition: 220ms cubic-bezier(.2, .65, .2, 1);
   width: 100%;
   min-width: 0;
   max-width: 100%;
   margin: 0;
   padding: 0;
   overflow: hidden;
   font-family: Arial, Helvetica, sans-serif;
   line-height: 1.45;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility
}

.vshs-ui-01 *,
.vshs-ui-01 *::before,
.vshs-ui-01 *::after {
   box-sizing: border-box
}

.vshs-ui-01 main,
.vshs-ui-01 section,
.vshs-ui-01 article,
.vshs-ui-01 div,
.vshs-ui-01 h1,
.vshs-ui-01 h2,
.vshs-ui-01 h3,
.vshs-ui-01 p {
   margin: 0
}

.vshs-ui-01 img {
   display: block;
   width: 100%;
   max-width: 100%;
   height: auto
}

.vshs-ui-01 a {
   color: inherit;
   text-decoration: none
}

.vshs-ui-01 button,
.vshs-ui-01 input,
.vshs-ui-01 textarea,
.vshs-ui-01 select {
   font: inherit
}

.vshs-ui-01 .container {
   width: calc(100% - (var(--vshs-side-space)*2));
   max-width: none;
   margin-left: var(--vshs-side-space);
   margin-right: var(--vshs-side-space)
}

.vshs-ui-01 .feature-banner {
   width: 100%;
   margin: 0;
   padding: 0;
   background: var(--vshs-white)
}

.vshs-ui-01 .feature-banner-card {
   width: 100%;
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
   min-height: clamp(300px, 28vw, 421px);
   overflow: hidden;
   border: 1px solid var(--vshs-blue);
   border-radius: 0 0 var(--vshs-radius) var(--vshs-radius);
   background: var(--vshs-blue)
}

.vshs-ui-01 .feature-banner-image {
   position: relative;
   min-width: 0;
   min-height: 0;
   overflow: hidden;
   background: #b7a58c
}

.vshs-ui-01 .feature-banner-image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
}

.vshs-ui-01 .feature-banner-content {
   min-width: 0;
   display: flex;
   flex-direction: column;
   justify-content: center;
   padding: clamp(28px, 4vw, 56px);
   background: var(--vshs-blue);
   color: var(--vshs-white)
}

.vshs-ui-01 .feature-banner-content h1 {
   max-width: 680px;
   margin: 0 0 clamp(12px, 1.5vw, 24px);
   color: var(--vshs-white);
   font-size: clamp(2rem, 3.1vw, 3.65rem);
   font-weight: 400;
   line-height: 1.06;
   letter-spacing: -.025em;
   overflow-wrap: anywhere
}

.vshs-ui-01 .feature-banner-content p {
   max-width: 650px;
   margin: 0 0 clamp(18px, 2.5vw, 43px);
   color: var(--vshs-white);
   font-size: clamp(14px, 1.15vw, 17px);
   line-height: 1.45;
   overflow-wrap: anywhere
}

.vshs-ui-01 .vshs-button {
   width: fit-content;
   max-width: 100%;
   min-height: clamp(48px, 4vw, 58px);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: clamp(10px, 1.5vw, 22px);
   padding: 10px clamp(14px, 1.5vw, 20px);
   border: 0;
   border-radius: 2px;
   background: var(--vshs-cyan);
   color: var(--vshs-blue);
   font-size: clamp(12px, 1vw, 14px);
   line-height: 1;
   text-align: center;
   transition: background-color var(--vshs-transition), color var(--vshs-transition), transform var(--vshs-transition), box-shadow var(--vshs-transition)
}

.vshs-ui-01 .vshs-button:hover {
   background: var(--vshs-white);
   color: var(--vshs-blue);
   transform: translateY(-2px);
   box-shadow: 0 5px 16px rgba(0, 33, 71, .16)
}

.vshs-ui-01 .vshs-button-arrow {
   display: inline-block;
   flex: 0 0 auto;
   font-size: clamp(20px, 1.8vw, 24px);
   line-height: 1;
   transition: transform var(--vshs-transition)
}

.vshs-ui-01 .vshs-button:hover .vshs-button-arrow {
   transform: translateX(3px)
}

.vshs-ui-01 .news-section {
   position: relative;
   isolation: isolate;
   width: 100%;
   padding: clamp(28px, 6vw, 72px) 0 clamp(24px, 5vw, 60px);
   overflow: hidden;
   background-color: var(--vshs-page);
   background-image: url("images/graphics-lines.jpeg");
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover
}

.vshs-ui-01 .news-section::before {
   content: "";
   position: absolute;
   inset: 0;
   z-index: 0;
   background: rgba(245, 244, 242, .88);
   pointer-events: none
}

.vshs-ui-01 .news-inner {
   position: relative;
   z-index: 1
}

.vshs-ui-01 .section-heading {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 20px;
   margin: 0 0 clamp(16px, 2.5vw, 30px);
   padding: 0;
   background: var(--vshs-page)
}

.vshs-ui-01 .section-heading h2 {
   min-width: 0;
   color: var(--vshs-orange);
   font-size: clamp(2rem, 3vw, 3rem);
   font-weight: 400;
   line-height: 1;
   letter-spacing: -.02em;
   overflow-wrap: anywhere
}

.vshs-ui-01 .view-all-news {
   flex: 0 0 auto;
   min-height: clamp(46px, 4vw, 59px);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: clamp(10px, 1.5vw, 20px);
   padding: 10px clamp(12px, 1.5vw, 17px);
   border: 1px solid var(--vshs-blue-light);
   background: var(--vshs-white);
   color: var(--vshs-blue-light);
   font-size: clamp(11px, .9vw, 13px);
   line-height: 1;
   text-align: center;
   transition: background-color var(--vshs-transition), color var(--vshs-transition), border-color var(--vshs-transition), box-shadow var(--vshs-transition)
}

.vshs-ui-01 .view-all-news:hover {
   background: var(--vshs-blue);
   color: var(--vshs-white);
   border-color: var(--vshs-blue);
   box-shadow: 0 4px 14px rgba(0, 33, 71, .16)
}

.vshs-ui-01 .view-all-news-arrow {
   display: inline-block;
   flex: 0 0 auto;
   font-size: clamp(18px, 1.5vw, 22px);
   line-height: 1;
   transition: transform var(--vshs-transition)
}

.vshs-ui-01 .view-all-news:hover .view-all-news-arrow {
   transform: translateX(3px)
}

.vshs-ui-01 .vshs-news-grid {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: clamp(10px, 1.25vw, 19px);
   align-items: stretch
}

.vshs-ui-01 .vshs-news-card {
   min-width: 0;
   height: 100%
}

.vshs-ui-01 .news-card-link {
   position: relative;
   display: flex;
   flex-direction: column;
   width: 100%;
   height: 100%;
   min-width: 0;
   overflow: hidden;
   border: 1px solid var(--vshs-border);
   border-radius: var(--vshs-radius);
   background: var(--vshs-page);
   color: inherit;
   transition: border-color var(--vshs-transition), background-color var(--vshs-transition), box-shadow var(--vshs-transition), transform var(--vshs-transition)
}

@media (hover:hover) and (pointer:fine) {
   .vshs-ui-01 .news-card-link:hover {
      background: rgba(225, 227, 230, .97);
      border-color: var(--vshs-blue);
      box-shadow: 0 5px 18px rgba(0, 33, 71, .13), 0 0 0 2px rgba(0, 33, 71, .045);
      transform: translateY(-2px)
   }

   .vshs-ui-01 .news-card-link:hover .news-image {
      transform: scale(1.018);
      filter: brightness(.94) saturate(.96)
   }

   .vshs-ui-01 .news-card-link:hover .news-card-title {
      color: var(--vshs-blue);
      text-decoration: underline;
      text-decoration-thickness: 1px;
      text-underline-offset: 4px
   }

   .vshs-ui-01 .news-card-link:hover .news-card-arrow {
      opacity: 1;
      transform: translateX(4px)
   }
}

.vshs-ui-01 .news-image-wrapper {
   position: relative;
   width: 100%;
   overflow: hidden;
   border-bottom: 1px solid var(--vshs-border);
   background: #aaa
}

.vshs-ui-01 .news-image {
   position: relative;
   width: 100%;
   height: clamp(150px, 14vw, 220px);
   overflow: hidden;
   background: #aaa;
   transition: transform 400ms cubic-bezier(.2, .7, .2, 1), filter 400ms ease
}

.vshs-ui-01 .news-image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center
}

.vshs-ui-01 .date-label {
   position: absolute;
   z-index: 2;
   top: 8px;
   left: 8px;
   max-width: calc(100% - 16px);
   padding: 5px 7px;
   border-radius: 2px;
   background: var(--vshs-yellow);
   color: var(--vshs-blue);
   font-size: clamp(8px, .65vw, 10px);
   line-height: 1;
   white-space: normal;
   overflow-wrap: anywhere
}

.vshs-ui-01 .news-card-content {
   flex: 1;
   min-width: 0;
   padding: clamp(10px, 1.1vw, 16px);
   background: var(--vshs-white)
}

.vshs-ui-01 .news-card-title {
   color: var(--vshs-heading);
   font-size: clamp(14px, 1.15vw, 17px);
   font-weight: 400;
   line-height: 1.3;
   overflow-wrap: anywhere;
   transition: color var(--vshs-transition)
}

.vshs-ui-01 .news-card-arrow {
   display: inline-block;
   margin-left: 4px;
   color: var(--vshs-blue);
   opacity: 0;
   transform: translateX(-2px);
   transition: opacity var(--vshs-transition), transform var(--vshs-transition)
}

.vshs-ui-01 .tags {
   display: flex;
   flex-wrap: wrap;
   gap: 4px;
   margin: 10px 0 0;
   padding: 0
}

.vshs-ui-01 .tag {
   display: inline-block;
   max-width: 100%;
   padding: 3px 5px;
   border: 1px solid #e0e3e6;
   border-radius: 2px;
   background: var(--vshs-white);
   color: var(--vshs-heading);
   font-size: clamp(7px, .6vw, 8px);
   line-height: 1.25;
   overflow-wrap: anywhere
}

.vshs-ui-01 .tutorial-section {
   width: 100%;
   padding: 0;
   background: var(--vshs-white)
}

.vshs-ui-01 .tutorial-card {
   width: 100%;
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
   min-height: clamp(240px, 24vw, 345px);
   overflow: hidden;
   border: 1px solid var(--vshs-blue);
   border-bottom: 0;
   border-radius: var(--vshs-radius) var(--vshs-radius) 0 0;
   background: var(--vshs-blue)
}

.vshs-ui-01 .tutorial-content {
   min-width: 0;
   display: flex;
   flex-direction: column;
   justify-content: center;
   padding: clamp(25px, 4vw, 55px);
   background: var(--vshs-blue);
   color: var(--vshs-white)
}

.vshs-ui-01 .tutorial-content h2 {
   margin: 0 0 clamp(10px, 1.3vw, 19px);
   color: var(--vshs-white);
   font-size: clamp(2rem, 3vw, 3.2rem);
   font-weight: 400;
   line-height: 1.05;
   overflow-wrap: anywhere
}

.vshs-ui-01 .tutorial-content p {
   max-width: 520px;
   margin: 0 0 clamp(15px, 2vw, 30px);
   color: var(--vshs-white);
   font-size: clamp(12px, 1vw, 14px);
   line-height: 1.55;
   overflow-wrap: anywhere
}

.vshs-ui-01 .tutorial-image {
   position: relative;
   min-width: 0;
   min-height: 0;
   overflow: hidden;
   background: #332e29
}

.vshs-ui-01 .tutorial-image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center top
}

.vshs-ui-01 .news-card-link:focus-visible,
.vshs-ui-01 .view-all-news:focus-visible,
.vshs-ui-01 .vshs-button:focus-visible {
   outline: 3px solid var(--vshs-cyan);
   outline-offset: 3px
}

/* Editorial news rail: fixed card proportions keep the section calm while
   the next story peeks into view and invites horizontal browsing. */
.vshs-ui-01 .news-section {
   padding: 72px 0 78px;
   background: #dcecf8;
   background-image: none;
}

.vshs-ui-01 .news-section::before {
   display: none;
}

.vshs-ui-01 .news-inner {
   width: 100%;
   max-width: none;
   margin: 0;
   padding: 0;
}

.vshs-ui-01 .section-heading {
   align-items: flex-end;
   margin-bottom: 30px;
   padding: 0 40px;
   background: transparent;
}

.vshs-ui-01 .section-heading-copy {
   min-width: 0;
}

.vshs-ui-01 .section-kicker {
   display: block;
   margin-bottom: 12px;
   color: #1d4b91;
   font-size: 11px;
   font-weight: 800;
   letter-spacing: .16em;
   line-height: 1.2;
   text-transform: uppercase;
}

.vshs-ui-01 .section-heading h2 {
   color: #173f7a;
   font-family: Georgia, "Times New Roman", serif;
   font-size: clamp(32px, 4vw, 54px);
   font-weight: 400;
   line-height: .98;
   letter-spacing: 0;
}

.vshs-ui-01 .news-controls {
   display: flex;
   gap: 10px;
}

.vshs-ui-01 .news-control {
   width: 44px;
   height: 44px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border: 1px solid #7eb6e8;
   border-radius: 999px;
   background: transparent;
   color: #173f7a;
   font-family: Georgia, "Times New Roman", serif;
   font-size: 27px;
   line-height: 1;
   cursor: pointer;
   transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}

.vshs-ui-01 .news-control:hover {
   background: #173f7a;
   border-color: #173f7a;
   color: #fff;
   transform: translateY(-2px);
}

.vshs-ui-01 .news-control--next {
   background: #2349a0;
   border-color: #2349a0;
   color: #fff;
}

.vshs-ui-01 .vshs-news-grid {
   display: flex;
   gap: 18px;
   overflow-x: auto;
   width: 100%;
   padding: 0 40px 18px;
   scrollbar-width: none;
}

.vshs-ui-01 .vshs-news-grid::-webkit-scrollbar {
   display: none;
}

.vshs-ui-01 .vshs-news-card {
   flex: 0 0 min(620px, calc((100vw - 116px) / 3));
   height: 430px;
}

.vshs-ui-01 .news-card-link {
   border: 0;
   border-radius: 7px;
   background: #fff;
   box-shadow: 0 10px 24px rgba(23, 63, 122, .10);
}

.vshs-ui-01 .news-image-wrapper,
.vshs-ui-01 .news-image {
   height: 250px;
   border: 0;
}

.vshs-ui-01 .news-image img {
   transition: transform 450ms ease, filter 450ms ease;
}

.vshs-ui-01 .date-label {
   top: auto;
   bottom: 12px;
   left: 12px;
   border-radius: 999px;
   background: #f2ae43;
   color: #173f7a;
   font-size: 10px;
   font-weight: 700;
}

.vshs-ui-01 .news-card-content {
   display: flex;
   flex-direction: column;
   padding: 20px 22px 22px;
   background: #fff;
}

.vshs-ui-01 .news-card-title {
   color: #173f7a;
   font-size: 19px;
   font-weight: 600;
   line-height: 1.22;
}

.vshs-ui-01 .news-card-summary {
   max-width: 48ch;
   margin: 12px 0 0;
   color: #5b6d80;
   font-size: 14px;
   line-height: 1.55;
}

.vshs-ui-01 .tags {
   margin-top: auto;
   padding-top: 16px;
}

.vshs-ui-01 .tag {
   border: 0;
   border-radius: 999px;
   background: #e7f1fa;
   color: #1d4b91;
   font-size: 9px;
   font-weight: 700;
   padding: 5px 8px;
}

@media (max-width: 600px) {
   .vshs-ui-01 .news-section {
      padding: 48px 0 52px;
   }

   .vshs-ui-01 .news-inner {
      padding: 0;
   }

   .vshs-ui-01 .section-heading {
      align-items: flex-start;
      padding: 0 22px;
   }

   .vshs-ui-01 .vshs-news-grid {
      padding-left: 22px;
      padding-right: 22px;
   }

   .vshs-ui-01 .vshs-news-card {
      flex-basis: min(420px, calc(100vw - 66px));
      height: 400px;
   }

   .vshs-ui-01 .news-image-wrapper,
   .vshs-ui-01 .news-image {
      height: 220px;
   }
}

@media (min-width:1600px) {
   .vshs-ui-01 .feature-banner-card {
      min-height: 421px
   }

   .vshs-ui-01 .news-image {
      height: 220px
   }

   .vshs-ui-01 .tutorial-card {
      min-height: 345px
   }
}

@media (max-width:1200px) {
   .vshs-ui-01 {
      --vshs-side-space: 24px
   }

   .vshs-ui-01 .feature-banner-card {
      min-height: 310px
   }

   .vshs-ui-01 .feature-banner-content {
      padding: 32px
   }

   .vshs-ui-01 .feature-banner-content h1 {
      font-size: clamp(2.1rem, 3.2vw, 2.7rem)
   }

   .vshs-ui-01 .feature-banner-content p {
      margin-bottom: 24px
   }

   .vshs-ui-01 .news-section {
      padding: 38px 0 30px
   }

   .vshs-ui-01 .vshs-news-grid {
      gap: 12px
   }

   .vshs-ui-01 .news-image {
      height: clamp(150px, 15vw, 190px)
   }

   .vshs-ui-01 .news-card-title {
      font-size: 15px
   }

   .vshs-ui-01 .tutorial-card {
      min-height: 270px
   }
}

@media (max-width:900px) {
   .vshs-ui-01 {
      --vshs-side-space: 20px
   }

   .vshs-ui-01 .feature-banner-card {
      grid-template-columns: 1.05fr .95fr;
      min-height: 290px
   }

   .vshs-ui-01 .feature-banner-content {
      padding: 27px
   }

   .vshs-ui-01 .feature-banner-content h1 {
      font-size: clamp(1.9rem, 4vw, 2.5rem)
   }

   .vshs-ui-01 .feature-banner-content p {
      margin-bottom: 20px;
      font-size: 14px
   }

   .vshs-ui-01 .news-section {
      padding: 32px 0 28px
   }

   .vshs-ui-01 .section-heading {
      margin-bottom: 18px
   }

   .vshs-ui-01 .vshs-news-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px
   }

   .vshs-ui-01 .news-image {
      height: clamp(170px, 22vw, 210px)
   }

   .vshs-ui-01 .news-card-title {
      font-size: 15px
   }

   .vshs-ui-01 .tutorial-card {
      grid-template-columns: 1fr 1fr;
      min-height: 260px
   }

   .vshs-ui-01 .tutorial-content {
      padding: 28px
   }

   .vshs-ui-01 .tutorial-image {
      min-height: 260px
   }
}

@media (max-width:600px) {
   .vshs-ui-01 {
      --vshs-side-space: 14px
   }

   .vshs-ui-01 .feature-banner-card {
      grid-template-columns: 1fr;
      min-height: 0
   }

   .vshs-ui-01 .feature-banner-image {
      height: clamp(190px, 58vw, 300px)
   }

   .vshs-ui-01 .feature-banner-content {
      padding: 25px 20px 26px
   }

   .vshs-ui-01 .feature-banner-content h1 {
      margin-bottom: 11px;
      font-size: clamp(1.75rem, 8vw, 2.3rem);
      line-height: 1.08
   }

   .vshs-ui-01 .feature-banner-content p {
      margin-bottom: 18px;
      font-size: 13px
   }

   .vshs-ui-01 .vshs-button {
      width: 100%;
      min-height: 48px;
      padding: 10px 15px;
      font-size: 12px
   }

   .vshs-ui-01 .news-section {
      padding: 24px 0
   }

   .vshs-ui-01 .section-heading {
      align-items: stretch;
      flex-direction: column;
      gap: 11px;
      margin-bottom: 14px
   }

   .vshs-ui-01 .section-heading h2 {
      font-size: clamp(1.9rem, 8vw, 2.25rem)
   }

   .vshs-ui-01 .view-all-news {
      width: 100%;
      min-height: 44px;
      padding: 10px 13px;
      font-size: 11px
   }

   .vshs-ui-01 .vshs-news-grid {
      grid-template-columns: 1fr;
      gap: 10px
   }

   .vshs-ui-01 .news-image {
      height: clamp(180px, 55vw, 270px)
   }

   .vshs-ui-01 .date-label {
      top: 8px;
      left: 8px;
      font-size: 8px
   }

   .vshs-ui-01 .news-card-content {
      padding: 11px
   }

   .vshs-ui-01 .news-card-title {
      font-size: 16px;
      line-height: 1.3
   }

   .vshs-ui-01 .news-card-summary {
      font-size: 13px;
      line-height: 1.5;
   }

   .vshs-ui-01 .tags {
      gap: 4px;
      margin-top: 7px
   }

   .vshs-ui-01 .tag {
      font-size: 7px
   }


   .vshs-ui-01 .tutorial-card {
      grid-template-columns: 1fr;
      min-height: 0
   }

   .vshs-ui-01 .tutorial-content {
      min-height: 230px;
      padding: 27px 20px
   }

   .vshs-ui-01 .tutorial-content h2 {
      margin-bottom: 9px;
      font-size: clamp(2rem, 8vw, 2.4rem)
   }

   .vshs-ui-01 .tutorial-content p {
      margin-bottom: 16px;
      font-size: 12px
   }

   .vshs-ui-01 .tutorial-image {
      height: clamp(200px, 55vw, 280px);
      min-height: 0
   }
}

@media (max-width:380px) {
   .vshs-ui-01 {
      --vshs-side-space: 10px
   }

   .vshs-ui-01 .feature-banner-image {
      height: 200px
   }

   .vshs-ui-01 .feature-banner-content {
      padding: 22px 16px 23px
   }

   .vshs-ui-01 .feature-banner-content h1 {
      font-size: 1.75rem
   }

   .vshs-ui-01 .feature-banner-content p {
      font-size: 12px
   }

   .vshs-ui-01 .news-section {
      padding: 20px 0
   }

   .vshs-ui-01 .news-image {
      height: 190px
   }

   .vshs-ui-01 .news-card-title {
      font-size: 15px
   }

   .vshs-ui-01 .tutorial-content {
      min-height: 215px;
      padding: 23px 16px
   }

   .vshs-ui-01 .tutorial-image {
      height: 200px
   }
}

@media (hover:none) {
   .vshs-ui-01 .news-card-link:hover {
      transform: none;
      box-shadow: none;
      border-color: var(--vshs-border);
      background: var(--vshs-page)
   }

   .vshs-ui-01 .news-card-link:hover .news-image {
      transform: none;
      filter: none
   }

   .vshs-ui-01 .news-card-link:hover .news-card-title {
      text-decoration: none
   }

   .vshs-ui-01 .news-card-link:hover .news-card-arrow {
      opacity: 0
   }
}

@media (prefers-reduced-motion:reduce) {

   .vshs-ui-01 *,
   .vshs-ui-01 *::before,
   .vshs-ui-01 *::after {
      transition-duration: .01ms !important;
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important
   }
}

.homepage-admissions-feature .feature-banner-content h1,
.homepage-tour .tutorial-content h2,
.homepage-news .section-heading h2 {
   font-size: 24px;
}

.homepage-admissions-feature .feature-banner-content p,
.homepage-tour .tutorial-content p {
   font-size: 15px;
}

/* Keep news photography visible and consistently framed after the legacy
   breakpoint rules above have finished applying. */
.vshs-ui-01 .news-image-wrapper,
.vshs-ui-01 .news-image {
   height: 250px;
   opacity: 1;
   visibility: visible;
}

.vshs-ui-01 .news-image img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center center;
   opacity: 1;
   visibility: visible;
   filter: none;
}

.vshs-ui-01 .date-label {
   top: auto;
   right: auto;
   bottom: 12px;
   left: 12px;
   width: max-content;
   height: auto;
   min-height: 0;
   max-height: none;
   padding: 6px 10px;
   border-radius: 999px;
   background: #f2ae43;
   color: #173f7a;
   font-size: 10px;
   line-height: 1.2;
   white-space: nowrap;
}

.vshs-ui-01 .news-control {
   flex: 0 0 44px;
   box-shadow: 0 5px 12px rgba(23, 63, 122, .16);
}

.vshs-ui-01 .news-control--prev {
   background: #dcecf8;
}

.vshs-ui-01 .news-control--prev:hover {
   background: #173f7a;
}

@media (max-width: 600px) {
   .vshs-ui-01 .news-image-wrapper,
   .vshs-ui-01 .news-image {
      height: 220px;
   }

   .vshs-ui-01 .date-label {
      top: auto;
      bottom: 10px;
      left: 10px;
      font-size: 9px;
   }
}