section.full-bleed.make-it-matter-style-reset {padding: 0; scroll-behavior: smooth;}
section.full-bleed.make-it-matter-style-reset .hero--make-it-matter,
section.full-bleed.make-it-matter-style-reset .student-stories--make-it-matter,
section.full-bleed.make-it-matter-style-reset .student-stories-info--make-it-matter {
    margin-left: 0;
    margin-right: 0; 
    grid-column: -1 / 1;
}

@media (max-width: 767px) {
section.full-bleed.make-it-matter-style-reset {padding: 0;}
section.full-bleed.make-it-matter-style-reset .hero--make-it-matter,
section.full-bleed.make-it-matter-style-reset .student-stories--make-it-matter,
section.full-bleed.make-it-matter-style-reset .student-stories-info--make-it-matter { 
    margin-left: 0;
    margin-right: 0;
}
}

section.make-it-matter-style-reset .desktop {display: block;}
section.make-it-matter-style-reset .mobile {display: none;}
@media (max-width: 767px) {
section.make-it-matter-style-reset .desktop {display: none;}
section.make-it-matter-style-reset .mobile {display: block;}
}

@media (max-width: 767px) {
    main .slab .inner .card.card-key-points {padding: 0 10px 0  10px; margin-bottom: 0;}
    main .slab .inner .card.card-key-points ul.study-areas.dom-ksp h5 {padding-top: 0;}
    main .slab .inner .card.card-key-points ul.study-areas .study-areas__item a {min-height: 50px;}
    main div[data-asset-id="2006780"].slab.secondary.puff {padding-bottom: 0;}
}

.make-it-matter-style-reset img {margin-bottom: 0;}
.make-it-matter-style-reset br {display: block;}

.mim-container {
/* max-width: 1394px; */
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 20px;
}

.hero--make-it-matter,
.student-stories--make-it-matter,
.student-stories-info--make-it-matter {
  color: #fff;
  background-color: #000;
}

.hero--make-it-matter {
  position: relative;
  display: flex;
  overflow: hidden;
  @media (max-width: 1023px) {height: calc(100vh - 150px);}
  @media (min-width: 1024px) {aspect-ratio: 1.884 / 1;}
}

.hero--make-it-matter::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 120px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
  z-index: 1;
}

.hero--make-it-matter img.hero,
.hero--make-it-matter video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  @media (min-width: 1025px) {object-position: 0 -140px;}
  @media (min-width: 1600px) {object-position: 0 -175px;}
  @media (min-width: 1921px) {object-position: 0 -235px;}
}

.hero--make-it-matter .mim-container {
  position: relative;
  margin-top: auto;
  margin-bottom: 20px;
  width: 100%;
  z-index: 1;
  display: flex;
  justify-content: flex-end;
  @media (min-width: 1024px) {margin-bottom: 120px;}
}

.hero--make-it-matter button {
  cursor: pointer;
  background-color: transparent;
  border: none;
  opacity: 0;
  padding: 0;
}

.statement--make-it-matter {
    position: absolute;
    right: 0;
    z-index: 8;
    bottom: 4vw;
    margin-right: 0;
    background-color: var(--white);
    color: var(--black);
    padding: 10px;
    @media (min-width: 768px) and (max-width: 1024px) {bottom: 50px; padding: 20px;}
    @media (min-width: 1024px) {bottom: 125px; padding: 40px;}
    
}

.statement--make-it-matter .statement {
      text-wrap: balance;
      text-align: left;
      margin: 0;
      width: 12ch;
      font: 800 42px/42px "Griffith Sans Display", serif;
      span.sting {color: var(--red);}
      @media (max-width: 768px) {font: 800 20px/22px "Griffith Sans Display", serif;}
      @media (min-width: 1280px) {font: 800 54px/54px "Griffith Sans Display", serif;}
}
 
.student-stories--make-it-matter {
  padding-bottom: 100px;
  padding-top: 20px;
  overflow: hidden;
}

.student-stories--make-it-matter .stories-swiper-controls {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 55px;
  gap: 20px;
  @media (min-width: 1024px) {gap: 35px;}
}



.student-stories--make-it-matter .stories-swiper-controls .title {
  margin: 0 !important;
  margin-right: auto !important;
  text-wrap: nowrap;
  font: 700 24px/28px "Griffith Sans Text", sans-serif;
  @media (min-width: 1024px) {font: 700 40px/48px "Griffith Sans Text", sans-serif;}
}

.student-stories--make-it-matter .stories-swiper-controls .swiper-button-prev,
.student-stories--make-it-matter .stories-swiper-controls .swiper-button-next {
  position: static;
  width: 50px;
  padding: 12px;
  border: 1px solid white;
  margin: 0;
  user-select: none;
}

.student-stories--make-it-matter .stories-swiper-controls .swiper-button-prev img {rotate: 180deg;}

.student-stories--make-it-matter .stories-swiper-controls .swiper-button-prev::after,
.student-stories--make-it-matter .stories-swiper-controls .swiper-button-next::after {
  display: none;
}

.stories-swiper {
    max-width: 80vw;
    @media (min-width: 1024px) {max-width: 30vw;}
}



.stories-swiper .swiper-wrapper .swiper-slide {
  position: relative;
  opacity: 0.5;
  cursor: pointer;
}

.stories-swiper .swiper-wrapper .swiper-slide-active {
  opacity: 1;
}

.stories-swiper .swiper-wrapper .swiper-slide .profile-photo {
  width: 100%;
  aspect-ratio: 1 / 1.34;
  object-fit: cover;
}

.stories-swiper .swiper-wrapper .swiper-slide img.name {
  position: absolute;
  top: 30px;
  left: 30px;
  max-height: 40px;
  width: fit-content;
}

.stories-swiper .swiper-wrapper .swiper-slide button.explore {
  position: absolute;
  bottom: 5px;
  right: 0;
  color: white;
  background-color: #E51F30;
  padding: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: none;
  cursor: pointer;
}

.stories-swiper .swiper-wrapper .swiper-slide button.explore img {
  max-width: 15px;
  object-fit: contain;
  object-position: center;
}

.student-stories-info--make-it-matter {
    padding-bottom: 50px;
    @media (min-width: 1024px) {padding-bottom: 50px;}
}

.student-stories-info--make-it-matter .title {
  margin-top: 0 !important;
  margin-bottom: 20px !important;
  clip-path: none;
  font: 700 24px/28px "Griffith Sans Text", sans-serif;
  @media (min-width: 768px) and (max-width: 1024px) {font: 700 42px/42px "Griffith Sans Text", sans-serif;}
  @media (min-width: 1024px) {font: 700 54px/64px "Griffith Sans Text", sans-serif;}
}

.student-stories-info--make-it-matter .description {
  max-inline-size: 60ch;
  font: 400 14px/15px "Griffith Sans Text", sans-serif;
  @media (min-width: 768px) and (max-width: 1024px) {font: 400 16px/17px "Griffith Sans Text", sans-serif;}
  @media (min-width: 1024px) {font: 400 20px/24px "Griffith Sans Text", sans-serif;}
}
  
.student-stories-info--make-it-matter .student-video,
.student-stories-info--make-it-matter .student-video-2  {
  position: relative;
  margin-top: 50px;
  margin-bottom: 50px;
  aspect-ratio: 1.56/1;
  @media (min-width: 1024px) {aspect-ratio: 2.23/1;}
}



.student-stories-info--make-it-matter .student-video video,
.student-stories-info--make-it-matter .student-video-2 video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.student-stories-info--make-it-matter .student-video button,
.student-stories-info--make-it-matter .student-video-2 button {
  background: transparent;
  border: 0;
}

.student-stories-info--make-it-matter .student-video button img,
.student-stories-info--make-it-matter .student-video-2 button img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
}

.student-stories-info--make-it-matter .quote-grid {
  margin-top: 40px;
  margin-bottom: 75px;
  display: grid;
  grid-template:
    "statement" auto
    "image" auto
    "quote" auto /
    1fr;
  @media (max-width: 1023px) {row-gap: 40px;}
  @media (min-width: 1024px) {
    grid-template:
      "image statement" auto
      "image quote" auto /
      1fr 1fr;
    column-gap: 75px;
    margin-top: 100px;
    margin-bottom: 100px;
  }
}

.student-stories-info--make-it-matter .quote-image {
  grid-area: image;
  aspect-ratio: 1 / 1;
  width: 100%;
  object-fit: cover;
  @media (min-width: 1024px) {grid-row: 1 / 3;}
}

.student-stories-info--make-it-matter .statement,
.student-stories-info--make-it-matter .statement_m {
  grid-area: statement;
  text-wrap: balance;
  font: 700 24px/25px "Griffith Sans Text", sans-serif;
  @media (min-width: 1024px) {font: 700 48px/54px "Griffith Sans Text", sans-serif;}
}

.student-stories-info--make-it-matter .quote {
  grid-area: quote;
  place-self: end;
  font: 400 20px/24px "Griffith Serif Display", serif;
  @media (min-width: 1024px) {font: 400 36px/42px "Griffith Serif Display", serif;}
}

.student-stories-info--make-it-matter .back-to-top {
  display: block;
  margin: 0 auto;
  color: #FFFFFF !important;
  background-color: #E51F30 !important;
  padding: 15px 20px;
  border: none;
  display: flex;
  align-items: center;
  gap: 15px;
  cursor: pointer;
  text-wrap: nowrap;
}

.student-stories-info--make-it-matter .back-to-top img {
  rotate: -90deg;
  height: 15px;
  object-position: center;
  object-fit: contain;
}



.hero--make-it-matter .mim-container {
    /* 
        Position mute icon always to bottom, right corner of video. 
    */
    bottom: 1rem;
    display: flex;
    justify-content: flex-start;
    left: 50%;
    margin: 0;
    max-width: 1160px;
    padding: 0 20px;
    position: absolute;
    transform: translateX(-50%);
    width: 100%;
    z-index: 100;
}
@media screen and (orientation:portrait) {
    .hero--make-it-matter {
        /* 
            Don't force the video parent height. 
            Adjust the height of the video parent according to the one of the video itself. 
            Default 16:9 aspect ratio to avoid content shifting.
        */
        aspect-ratio: 16/9;
        height: auto;
    }
    .hero--make-it-matter::before {
        /* 
            Remove black gradient only on mobile. 
            This is not needed anymore as users can always see the rest of the page. 
        */
        display: none;
    }
    .hero--make-it-matter video {
        /* 
            Don't force the video's height to 100vh. 
            This way important parts of the video won't get cropped. 
        */
        height: auto;
        left: unset;
        margin: 0;
        position: relative;
        top: unset;
        width: 100%;
    }
    .hero--make-it-matter .mim-scrollto {
        display: none;
    }
}
@media screen and (orientation:landscape) {
    .hero--make-it-matter {
        /* 
            Don't force aspect ratio. 
            Force min-height to avoid parts of the video appearing below the fold. 
            Stick it to top on scroll. 
        */
        aspect-ratio: unset;
        min-height: calc(85vh - 125px);
        position: sticky;
        top: 0;
        z-index: 8;
    }
    .hero--make-it-matter::before {
        /* 
            Render black gradient starting from desktop.
        */
        display: block;
        height: 20vh;
        mix-blend-mode: hard-light;
    }
    .hero--make-it-matter video {
        /* 
            Position the video always in the middle of the parent.
        */
        height: 100%;
        left: 50%;
        margin: 0;
        object-fit: cover;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
    }
    .hero--make-it-matter .mim-scrollto {
        bottom: 1rem;
        left: 50%;
        position: absolute;
        transform: translateX(-50%);
        z-index: 200;
    }
    .hero--make-it-matter .mim-scrollto {
        cursor: pointer;
        opacity: 0.5;
        transform: scale(0.9);
        transition: 0.25s ease-in-out 0s;
    }
    .hero--make-it-matter .mim-scrollto:hover {
        opacity: 1;
        transform: scale(1);
    }
    .hero--make-it-matter .mim-scrollto svg {
        display: block;
        fill: #ffffff;
        height: 2rem;
        width: 2rem;
    }
    .student-stories--make-it-matter,
    .student-stories-info--make-it-matter {
        background-color: #000000;
        position: relative;
        transform: translateZ(0);
        z-index: 9;
        overflow-x: hidden;
    }
}
@media (min-width: 768px ) {}
@media (min-width: 1024px ) {}
@media (min-width: 1920px ) {
    .hero--make-it-matter .mim-container {
        bottom: 2.5rem;
    }
    .hero--make-it-matter .mim-scrollto {
        bottom: 2rem;
    }
    .hero--make-it-matter .mim-scrollto svg {
        height: 3rem;
        width: 3rem;
    }
}