.campus-dates-block {
   background: var(--color-primary-dark);
   font-family: 'Montserrat', Arial, sans-serif;
   color: var(--color-white);
   overflow-x: visible;
   max-width: 108rem;
   width: 100%;
   margin: 0 auto;
   box-sizing: border-box;
   padding-top: clamp(1rem, calc(120 / 1728 * 100vw), 7.5rem);
   padding-bottom: clamp(1rem, calc(120 / 1728 * 100vw), 7.5rem);
   padding-left: 9.375rem;
   padding-right: 9.375rem;
   position: relative;
   isolation: isolate;
 }

 .campus-dates-block::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   width: auto;
   bottom: 0;
   background: var(--color-primary-dark);
   box-shadow: 0 0 0 100vmax var(--color-primary-dark);
   clip-path: inset(0 -100vmax);
   transform: none;
   z-index: -1;
 }

 @media (min-width: 1025px) and (max-width: 1280px) {
   .campus-dates-block {
     padding-left: 5rem;
     padding-right: 5rem;
   }
 }

 @media (min-width: 1541px) {
   .campus-dates-block {
     padding-left: clamp(6rem, 15.046vw, 16.25rem);
     padding-right: clamp(6rem, 15.046vw, 16.25rem);
   }
 }

 @media (min-width: 871px) and (max-width: 1024px) {
   .campus-dates-block {
     padding-left: 3.125rem;
     padding-right: 3.125rem;
     padding-top: 5rem;
   }
 }

 @media (min-width: 768px) and (max-width: 870px) {
   .campus-dates-block {
     padding-left: 2rem;
     padding-right: 2rem;
     padding-top: 5rem;
   }
 }

 @media (max-width: 767.98px) {
   .campus-dates-block {
     padding-left: 1rem;
     padding-right: 1rem;
     padding-top: 5rem;
     padding-bottom: 5rem;
   }

   #start-dates.campus-dates-block {
     padding-top: 5rem;
     padding-bottom: 5rem;
   }
 }

 .campus-dates-block-title {
   font-size: 2.5rem;
   font-weight: 400;
   margin-bottom: 4.3125rem;
   text-align: left;
   letter-spacing: .02em;
   font-family: Outfit;
   line-height: 2.5rem;

 }

 .campus-dates-list {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 2.5rem;
   width: 100%;
   /* margin-bottom: 0.5em; */
   box-sizing: border-box;
 }

 .campus-dates-card {
   background: var(--color-white);
   border-radius: 0.875rem;
   box-shadow: 0 0.125rem 1.125rem rgba(66, 66, 66, 0.09);
   display: flex;
   align-items: stretch;
   padding: 1rem;
   /* gap: 1.35em; */
   min-height: clamp(11.125rem, 11.125vw, 11.125rem);
   width: 100%;
   max-width: 100%;
   transition: box-shadow .16s;
   position: relative;
 }

 @media (min-width: 901px) {
   .campus-dates-card {
     gap: clamp(2rem, calc(69 / 1728 * 100vw), 4.3125rem);
   }

   .campus-info {
     margin-right: 0 !important;
   }
 }

 .campus-info {
   flex: 1 1 60%;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   /* justify-content: space-between; */
   min-width: 0;
   margin-right: 1rem;
 }

 .campus-location {
   font-size: 1.125rem;
   font-weight: 700;
   color: var(--color-black-soft);
   margin-bottom: 0.5rem;
   /* margin-top: .3em; */
   letter-spacing: 0.01rem;
   line-height: 1.3125rem;
   text-transform: uppercase;
   font-family: Outfit;
 }

 .campus-address {
   font-size: 0.875rem;
   color: var(--color-black-soft);
   margin-bottom: 0.375rem;
   line-height: 1.375rem;
   /* width: 70%; */
   font-weight: 300;
   font-family: Outfit;
 }

 .campus-card-btn:hover {
   background: var(--color-green-dark);
 }

 .campus-card-btn {
   margin-top: 0.3125rem;
   display: inline-block;
   background: var(--color-green-primary);
   font-family: Outfit;
   color: var(--color-white);
   font-size: 0.875rem;
   line-height: 1.375rem;
   font-weight: 500;
   width: 8.75rem;
   text-align: center;
   box-sizing: border-box;
   border-radius: 2.5rem;
   padding: 0.61em 1.85em 0.61em 1.33em;
   border: none !important;
   text-decoration: none;
   box-shadow: 0 0.125rem 0.5rem rgba(58, 195, 81, .13);
   transition: background .18s;
   cursor: pointer;
   letter-spacing: 0.015em;
 }

 .campus-card-btn:hover,
 .campus-card-btn:focus {
   background: var(--color-green-calendar);
   color: var(--color-white);
   outline: 0.125rem solid var(--color-green-calendar);
 }

 .campus-card-btn:focus-visible {
   outline: 0.125rem solid var(--color-green-calendar);
   outline-offset: 0.125rem;
   border-radius: 2.5rem;
 }

 .campus-calendar {
   flex: 0 0 auto;
   /* width: clamp(10rem, 17.8vw, 20.5rem); */
   width: clamp(10rem, 18vw, 20.5rem);

   background: var(--color-gray-panel);
   border-radius: 0.625rem;
   --campus-calendar-pad: clamp(0.25rem, 0.6vw, 0.5rem);
   padding: var(--campus-calendar-pad);
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align: center;
   box-shadow: 0 0.0625rem 0.3125rem rgba(46, 46, 46, 0.07);
   margin-left: auto;
   margin-right: 0;
   position: relative;
   overflow: hidden;
 }

 .calendar-label {
   font-size: 1em;
   font-weight: 700;
   color: var(--color-text-almost-black);
   margin-bottom: 0.11em;
   letter-spacing: .03em;
   margin-top: 0;
   text-align: right;
   width: 100%;
 }

 .calendar-sub {
   font-size: .97em;
   font-weight: 700;
   color: var(--color-slate-muted);
   margin-bottom: 0.05em;
   letter-spacing: .01em;
   margin-top: 0.11em;
   text-align: right;
   width: 100%;
 }

 .calendar-day {
   font-size: 2.21em;
   font-weight: 700;
   color: var(--color-text-almost-black);
   margin: 0.16em 0 .03em 0;
   letter-spacing: 0.035em;
   text-align: right;
   width: 100%;
 }

 @media (min-width: 1101px) and (max-width: 1200px) {
   .campus-dates-card {
     width: 100%;
   }
 }

 @media (min-width: 1200px) and (max-width: 1400px) {
   .campus-calendar {
     width: clamp(8rem, 16vw, 12rem);
   }
 }

 @media (max-width: 1100px) {
   .campus-dates-list {
     grid-template-columns: repeat(2, 1fr);
     gap: 2.5rem;
   }

   .campus-dates-card {
     width: 100%;
   }
 }

 @media (max-width: 900px) {
   .campus-dates-list {
     grid-template-columns: repeat(2, 1fr);
     gap: 2.5rem;
   }

   .campus-dates-card {
     width: 100%;
   }

   .start-date {
     font-family: Outfit;
     font-size: 0.875rem;
     font-style: normal;
     font-weight: 700;
     line-height: 0.875rem;
     text-transform: uppercase;
   }
 }

 @media (max-width: 1000px) {
   .campus-dates-block {
     padding-top: clamp(1rem, 6.94vw, 7.5rem);
     padding-bottom: clamp(1rem, 6.94vw, 7.5rem);
   }


   .campus-dates-block-title {
     font-size: 2rem;
     margin-bottom: 2.0625rem;
     font-weight: 400;
     font-family: Outfit;
     line-height: 2.5rem;
     padding: 0 1rem;
   }

   .campus-dates-list {
     grid-template-columns: 1fr;
     gap: 1rem;
   }

   .campus-dates-card {
     flex-direction: row;
     align-items: center;
     gap: 4.5rem;
     min-height: 0;
     padding: 1rem;
     width: 100%;
     box-sizing: border-box;
     overflow: visible;
   }

   .campus-info {
     flex: 1 1 0%;
     margin: 0;
     margin-right: 0;
     min-width: 0;
   }

   .campus-calendar {
     flex: 0 0 clamp(4.75rem, 15vw, 5.5rem);
     width: clamp(4.75rem, 15vw, 5.5rem);
     min-width: clamp(4.75rem, 15vw, 5.5rem);
     max-width: none;
     margin: 0;
     margin-left: auto;
     box-shadow: none;
     background: var(--color-white);
     position: relative;
     overflow: visible;
     padding: 0;
     border-radius: 0.25rem;
   }

   .campus-calendar .start-date-stack {
     position: relative;
     right: auto;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: clamp(0.25rem, 1vw, 0.5rem);
     padding: 0;
     background: transparent;
     border-radius: 0;
   }

   .campus-calendar .start-date {
     text-align: center;
     font-size: clamp(0.625rem, 1.8vw, 0.75rem);
     line-height: 1;
   }

   .campus-calendar .lg-calendar {
     margin-top: 0.3rem;
     width: clamp(4rem, 10vw, 5.1rem);
     height: auto;
   }

   .campus-card-btn {
     font-size: 0.625rem;
   }
 }

 .start-date-stack {
   display: flex;
   flex-direction: column;
   gap: clamp(0.125rem, 0.18vw, 0.25rem);
   align-items: center;
   justify-content: center;
   /* width: 14.82%; */
   /* height: 62.18%; */
   position: absolute;
   top: var(--campus-calendar-pad);
   right: var(--campus-calendar-pad);
   bottom: var(--campus-calendar-pad);
   /* left: 59%; */
   /* bottom: 25.28%; */
   /* top: 11.54%; */
   background: var(--color-white);
   /* padding: clamp(0.5rem, 0.55vw, 0.625rem); */
   padding: clamp(0.5rem, 0.5rem, 0.5rem);

   vertical-align: middle;
   border-radius: 0.3125rem;
   box-sizing: border-box;
   width: clamp(5.25rem, 6.8vw, 7.25rem);
   max-width: calc(100% - (var(--campus-calendar-pad) * 2));
   max-height: calc(100% - (var(--campus-calendar-pad) * 2));
   overflow: hidden;
 }

 .start-date {
   color: var(--base-ui-four-28323c, var(--color-primary-dark));
   text-align: center;
   font-family: Outfit;
   font-size: 0.875rem;
   font-style: normal;
   line-height: 0.875rem;
   font-weight: 700;
   text-transform: uppercase;
   position: relative;
   align-self: center;
   height: auto;
   white-space: nowrap;
   width: max-content;
   /* left: 24px; */
   bottom: 0;
 }

 /* Allow wrapping when translated to other languages */
 html:lang(es) .start-date,
 html[lang="es"] .start-date,
 html.translated-ltr .start-date,
 html.translated-rtl .start-date {
   white-space: normal !important;
   width: auto !important;
   max-width: 100% !important;
   line-height: 1.2 !important;
 }

 @media (min-width: 1001px) {
   .start-date {
     font-size: clamp(0.75rem, 0.3vw + 0.5625rem, 0.875rem);
     line-height: clamp(0.75rem, 0.3vw + 0.5625rem, 0.875rem);
   }
 }

 .start-date-new-font {
   color: var(--base-ui-four-28323c, var(--color-primary-dark));
   text-align: center;
   font-family: Outfit;
   font-size: 0.875rem;
   font-style: normal;
   line-height: 0.875rem;
   font-weight: 700;
   text-transform: uppercase;
   position: relative;
   align-self: center;
   height: auto;
   white-space: nowrap;
   width: max-content;
   bottom: 0;
 }

 .lg-calendar {
   flex-shrink: 0;
   width: 100%;
   max-width: clamp(4.5rem, 5.8vw, 6.25rem);
   height: auto;
   position: relative;
   aspect-ratio: 86.68 / 94.84;
 }

 .lg-calendar time {
   display: block;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   border-radius: 0.5rem;
   outline: none;
   z-index: 10;
 }


 .vector {
   width: 100.37%;
   height: 32.69%;
   position: absolute;
   right: -0.37%;
   left: 0%;
   bottom: 57.75%;
   top: 9.57%;
   overflow: visible;
 }

 .vector2 {
   width: 100.37%;
   height: 54.83%;
   position: absolute;
   right: -0.37%;
   left: 0%;
   bottom: -0.25%;
   top: 45.42%;
   overflow: visible;
 }

 .vector3 {
   width: 5.77%;
   height: 15.82%;
   position: absolute;
   right: 78.08%;
   left: 16.15%;
   bottom: 84.11%;
   top: 0.08%;
   overflow: visible;
 }

 .vector4 {
   width: 5.77%;
   height: 15.82%;
   position: absolute;
   right: 15.78%;
   left: 78.45%;
   bottom: 84.11%;
   top: 0.08%;
   overflow: visible;
 }

 .abc {
   color: var(--base-ui-light-ffffff, var(--color-white));
   text-align: center;
   font-family: "Outfit-Bold", sans-serif;
   font-size: clamp(0.75rem, 0.95vw, 1rem);
   line-height: clamp(1rem, 1.35vw, 1.5rem);
   font-weight: 700;
   position: absolute;
   right: 28.49%;
   left: 28.02%;
   width: 43.49%;
   bottom: 59.04%;
   top: 19.63%;
   height: 22.33%;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 ._00 {
   color: var(--base-ui-light-ffffff, var(--color-white));
   text-align: center;
   font-family: var(--display-bold-48-font-family);
   font-size: clamp(2rem, 2.8vw, 3rem);
   line-height: clamp(2rem, 2.8vw, 3rem);
   font-weight: var(--display-bold-48-font-weight, 700);
   text-transform: uppercase;
   position: absolute;
   right: 0.05%;
   left: 0%;
   width: 99.95%;
   bottom: 0.07%;
   top: 46.2%;
   height: 53.73%;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 @media (min-width: 1600px) {
   .start-date-stack {
     width: clamp(5rem, 5.9vw, 6.5rem);
   }

   .lg-calendar {
     max-width: clamp(4rem, 4.9vw, 5.5rem);
   }

   .abc {
     font-size: clamp(0.6875rem, 0.82vw, 0.875rem);
     line-height: clamp(0.9rem, 1.05vw, 1.125rem);
   }

   ._00 {
     font-size: clamp(1.75rem, 2.2vw, 2.5rem);
     line-height: clamp(1.75rem, 2.2vw, 2.5rem);
   }
 }

 @media (max-width: 1000px) {
   .start-date-stack {
     display: flex;
     flex-direction: column;
     gap: clamp(0.125rem, 0.4vw, 0.25rem);
     align-items: center;
     justify-content: center;
     width: 28%;
     height: auto;
     position: absolute;
     right: 5.56%;
     left: 0;
     bottom: 18.28%;
     top: 18.54%;
     padding: clamp(0.25rem, 0.8vw, 0.5rem);
   }

   /* Keep calendar fully visible on mobile cards. */
   .campus-calendar .start-date-stack {
     width: 100%;
     max-width: 100%;
     left: auto;
     right: auto;
     top: auto;
     bottom: auto;
     height: auto;
     max-height: none;
     overflow: visible;
   }

   /* Strong override: target the section ID to ensure padding applies */
   @media (min-width: 1201px) and (max-width: 1282px) {
     #start-dates.campus-dates-block {
       padding-left: 9.375rem !important;
       padding-right: 9.375rem !important;
     }

     /* Make the list span the full content width inside the padded section */
     #start-dates.campus-dates-block .campus-dates-list {
       width: calc(100% + 18.75rem) !important;
       margin-left: -9.375rem !important;
       margin-right: -9.375rem !important;
       box-sizing: border-box;
       gap: 2.5rem;
     }

     /* Ensure cards use full row width */
     #start-dates.campus-dates-block .campus-dates-card {
       width: 100% !important;
       max-width: none;
     }
   }

   .start-date {
     color: var(--base-ui-four-28323c, var(--color-primary-dark));
     text-align: center;
     font-family: Outfit;
     font-size: 0.875rem;
     font-style: normal;
     line-height: 0.875rem;
     font-weight: 700;
     text-transform: uppercase;
     position: relative;
     align-self: center;
     height: auto;
     /* left: 48px; */
     bottom: 0;
     width: max-content;
     white-space: nowrap;
   }
 }

 @media (min-width: 768px) and (max-width: 1000px) {
   .campus-dates-card {
     align-items: stretch;
     min-height: 11.125rem;
     gap: 2rem;
   }

   .campus-calendar {
     flex: 0 0 min(100%, 22.5rem);
     width: min(100%, 22.5rem);
     max-width: 22.5rem;
     min-width: 0;
     min-height: 100%;
     align-self: stretch;
     background: var(--color-gray-panel);
     border-radius: 0.625rem;
     box-shadow: 0 0.0625rem 0.3125rem rgba(46, 46, 46, 0.07);
     --campus-calendar-pad: clamp(0.25rem, 0.6vw, 0.5rem);
     padding: var(--campus-calendar-pad);
     margin-left: auto;
     overflow: hidden;
   }

   .campus-calendar .start-date-stack {
     position: absolute;
     top: var(--campus-calendar-pad);
     right: var(--campus-calendar-pad);
     bottom: var(--campus-calendar-pad);
     left: auto;
     width: clamp(5.25rem, 6.8vw, 7.25rem);
     max-width: calc(100% - (var(--campus-calendar-pad) * 2));
     max-height: calc(100% - (var(--campus-calendar-pad) * 2));
     background: var(--color-white);
     border-radius: 0.3125rem;
     padding: clamp(0.5rem, 0.5rem, 0.5rem);
   }

   .campus-calendar .lg-calendar {
     margin-top: 0;
     width: 100%;
     max-width: clamp(4.5rem, 5.8vw, 6.25rem);
     height: auto;
   }
 }

 @media (max-width: 385px) {
   .campus-dates-card {
     gap: 1.5rem;
   }

   .start-date {
     font-family: Outfit;
     font-size: 0.875rem;
     font-style: normal;
     font-weight: 700;
     line-height: 0.875rem;
     text-transform: uppercase;
   }
 }


 /* reflow css =================================== */

 @media (max-width: 325px) {
   .campus-dates-card {
     flex-direction: column-reverse;
     align-items: center;
     gap: 1rem;
   }

   .campus-info {
     margin-right: 0;
     width: 100%;
     align-items: center;
     text-align: center;
   }

   .campus-calendar {
     margin: 0 auto;
   }
 }