@use '_helper' as *;

 .home-support {
   &__header {
     @media screen and (min-width: $break-medium) {
       margin-bottom: 6px;
     }

     @media screen and (min-width: $break-large) {
       margin-bottom: 10px;
     }
   }

   h2 {
     @include h1-small();
   }

   .story-display__intro {
     @include body-large(true);
     max-width: 800px;
   }

   .story-display__wrap {
     margin-top: 30px;

     @media screen and (min-width: $break-medium) {
       display: flex;
       margin-top: 60px;
     }

     @media screen and (min-width: $break-large) {
       margin-top: 70px;
     }
   }

   .story-display__media {
     flex: 0 0 50%;

     div:not(.vid-inline__icon) {
       height: 100%;
     }
   }

   .story-display__video-cover span {
     @media screen and (min-width: $break-medium) {
       font-size: rem(25px);
     }

     @media screen and (min-width: $break-large) {
       font-size: rem(35px);
     }
   }

   .story-display__image {
     @media screen and (min-width: $break-medium) {
       padding-top: 105.4%;
       min-height: 100%;
     }

   }

   .story-display__content {
     >*:last-of-type {
       margin-bottom: 0;
     }
   }

   .story-display__video-cover {
     @media screen and (min-width: $break-medium) {
       padding: 40.3% 25px 30px;
       flex-direction: column;
       align-items: start;
       justify-content: end;
     }

     @media screen and (min-width: $break-large) {
       padding: 80.3% 40px 40px;
       align-items: center;
       flex-direction: row;
       justify-content: start;
     }
   }

   .story-display__content {
     @media screen and (min-width: $break-large) {
       padding-top: 60px;
     }
   }

   .story-display__title,
   .story-display__subtitle {
     @media screen and (max-width: $break-medium - 1) {
       display: inline-block;
     }
   }

   .story-display__subtitle {
     @media screen and (max-width: $break-medium - 1) {
       margin-left: rem(7px);
     }
   }

   .vid-inline {
     &__icon {
       @media screen and (min-width: $break-medium) and (max-width: $break-large - 1) {
         width: rem(50px);
         height: rem(50px);
         min-width: rem(50px);
       }

       path {
         @media screen and (max-width: $break-medium - 1) {
           transform: scale(0.75) translate(8px, 6px);
         }
       }
     }
   }

   &__links {
     color: $color-white;
     position: relative;
     @include swipe($type: "blue", $direction: "left", $vertPosOffset: 100px);
     padding: 40px 0 80px;
     margin-top: 0 !important;

     @media screen and (min-width: $break-medium) {
       padding: 60px 0 120px;

     }


     @media screen and (min-width: $break-large) {
       padding: 60px 0 200px;

     }

     h3 {
       @include h5;
       margin-top: 0;
       color: $color-white;
     }

     a {
       color: $color-white;
       border-color: $color-white;

       &:hover {
         color: $color-black;
       }

       &:focus-visible {
         outline-color: $color-white;
       }
     }

     ul {
       padding: 0;
       display: flex;
       flex-wrap: wrap;
       flex-direction: column;
       gap: 16px;

       @media screen and (min-width: $break-medium) {
         flex-direction: row;
       }

       @media screen and (min-width: $break-large) {
         gap: 20px;
       }

       li {
         margin-bottom: 0;

         &:before {
           content: none;
         }
       }
     }
   }
 }