:root{
  /**
  *Colors
  */
  --white: #FFFFFF;
  --yellow: #eeeac0;
  --primary-100: #247d9b;
  --primary-90: #1E6DE5;
  --primary-80: #4b6785;
  --primary-70: #1755B2;
  --primary-40: #1d73e7;
  --primary-20: #132b45;
  --secondary-100: #7d9f9c;
  --secondary-20: #c56126;
  --neutral-100: #FAFCFF;
  --neutral-98: #F2F5FA;
  --neutral-95: #E9ECF2;
  --neutral-90: #DADFE5;
  --neutral-80: #C2C6CC;
  --neutral-60: #919499;
  --neutral-50: #797C80;
  --neutral-40: #616366;
  --neutral-30: #494A4D;
  --neutral-20: #303133;
  --neutral-10: #18191A;
  --neutral-5: #0C0C0D;
  --error-100: #df615a;
  --gradient: linear-gradient(270deg,#0e3e86 0%,#031f2e 100%);

  /**
 *Typography
 */
 --font-primary:"Roboto", sans-serif;
 --fs-base: 62.5%;
 --fs-headline-large: 3.6rem;
 --fs-headline-medium: 2.8rem;
--fs-headline-small: 2.8rem;
--fs-title-large: 2.2rem;
--fs-title-medium: 2rem;
--fs-title-small: 1.8rem;
--fs-body-large: 1.6rem;
--fs-body-medium: 1.6rem;
--fs-label-large: 1.6rem;
--fs-label-medium: 1.4rem;

/*line height*/

--lh-headline-large: 44px;
--lh-headline-medium: 36px;
--lh-headline-small: 36px;
--lh-title-large: 28px;
--lh-title-medium: 24px;
--lh-title-small: 24px;
--lh-body-large: 24px;
--lh-body-medium: 24px;
--lh-label-large: 24px;
--lh-label-medium: 20px;

/*font weight*/

--weight-bold: 700;
--weight-semiBold: 600;
--weight-regular: 400;

/*Letter spacing*/

--traking-n-025: -0.25px;
--traking-p-05: 0.5px;

/**
* Border Radius
*/

--radius-small: 8px;
--radius-medium: 12px;
--radius-large: 16px;
--radius-extra-large: 32px;
--radius-full: 1000px;
--radius-circle: 50%;

/**
* Box Shadow
*/

--shadow-1: 0px 2px 4px 0px #00000033;
--shadow-2: 0px 5px 10px 0px #0000000D;
--shadow-3: 0px 5px 10px 0px #00000033;
--shadow-4: 0px 10px 20px 0px #0000001A;

/**
* Transition
*/
--transition-easing-quick: cubic-bezier(0, 0.7, 0.3, 1);
--transition-duration-quick: 200ms;
--transition-duration-smooth: 500ms;




}
/*------------------*/
/* #RESET*/
/*------------------*/
*,
*::before,
*::after{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
li{
  list-style: none;
}
a,
img,
span,
input,
select,
button{
  display: block;

}
a{
  color: inherit;
  text-decoration: none;
}
img{
  height: auto;
  
}
input,
select,
button{
  background: none;
  border: none;
  font: inherit;
}
input,
select{
  width: 100%;
  outline: none;

}
address{
  font-style: normal;
}
select{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
html{
  font-family: var(--font-primary);
  font-size: var(--fs-base);
  scroll-behavior: smooth;

}
body{
  background-color: var(--neutral-98);
  color: var(--neutral-5);
  font-size: var(--fs-body-medium);
  line-height: var(--lh-body-medium);
 
}
::-webkit-scrollbar{  width: 12px;}
::-webkit-scrollbar-track{
  background-color: var(--neutral-90);
}
::-webkit-scrollbar-thumb{
  background-color: var(--neutral-60);
  border-radius: 4px;
}
/*------------------*/
/* #TYPOGRAPHY
/*------------------*/
.headline-large{
  font-size: var(--fs-headline-large);
  line-height: var(--lh-headline-large);
  font-weight: var(--weight-bold);
  letter-spacing: var(--traking-n-025);
}
.headline-medium{
  font-size: var(--fs-headline-medium);
  line-height: var(--lh-headline-medium);
  font-weight: var(--weight-bold);
  
}
.headline-small{
  font-size: var(--fs-headline-small);
  line-height: var(--lh-headline-small);
  font-weight: var(--weight-bold);
  
}

.title-large{
  font-size: var(--fs-title-large);
  line-height: var(--lh-title-large);
  font-weight: var(--weight-semiBold);
}
.title-medium{
  font-size: var(--fs-title-medium);
  line-height: var(--lh-title-medium);
  font-weight: var(--weight-semiBold);
}
.title-small{
  font-size: var(--fs-title-small);
  line-height: var(--lh-title-small);
  font-weight: var(--weight-semiBold);
}

.body-large{
  font-size: var(--fs-body-large);
  line-height: var(--lh-body-large);
  font-weight: var(--weight-regular);
}
.body-medium{
  font-size: var(--fs-body-medium);
  line-height: var(--lh-body-medium);
  font-weight: var(--weight-regular);
}
.label-medium{
  font-size: var(--fs-label-medium);
  font-weight: var(--weight-semiBold);
  line-height: var(--lh-label-medium);
  letter-spacing: var(--traking-p-05);
  
}
/*------------------*/
/* #REUSED STYLE
/*------------------*/
.container{
  max-width: 580px;
  width: 100%;
  padding-inline: 16px;
  margin-inline: auto;
}
.section{
  padding-block-end:60px ;

}
.title-wrapper{
  margin-block-end:32px ;
}
.img-holder{
  aspect-ratio: var(--width) / var(--height);
  background-color: var(--neutral-80);
  overflow: hidden;

}
.img-cover{
  width: 100%;
  height: 100%;
  object-fit: cover;

}

/*------------------*/
/* #COMPONENT
/*------------------*/
.btn{
  max-width: max-content;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 48px;
  padding-inline: 24px;
  border-radius: var(--radius-full);
  transition: var(--transition-duration-quick) var(--transition-easing-quick);
}
.btn-fill {
  background-color: var(--primary-100);
  color: var(--neutral-100);

}
.btn-fill:where(:hover,:focus){
  background-color: var(--primary-90);
  box-shadow: var(--shadow-1);
}
.btn-fill:where(:active,:focus-visible){
background-color: var(--primary-80);
}
.btn-outline{
  color: var(--primary-100);
  box-shadow: inset 0 0 0 2px var(--primary-100);
}
.btn-outline:where(:hover,:focus,:focus-visible){
  color: var(--neutral-100);
}
.btn-outline:hover{
  background-color: var(--primary-100);
}
.btn-outline:focus{
  background-color: var(--primary-90);
}
.btn-outline:where(:active,:focus-visible){
  background-color: var(--primary-80);
}
.badge{
  max-width: max-content;
  height: 32px;
  display: grid;
  place-items: center;
  padding-inline: 16px;
  background-color: var(--secondary-100);
  color: var(--neutral-100);
  border-radius: var(--radius-medium);
  box-shadow: var(--shadow-3);


}
.icon-btn{
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background-color: var(--neutral-100);
  color: var(--neutral-10);
  border-radius: var(--radius-circle);
  box-shadow: var(--shadow-3);
  transition: var(--transition-duration-quick) var(--transition-easing-quick);

}
.icon-btn:where(:hover,:focus-visible){
  background-color: var(--neutral-90);
  
 
}
.card{
  border-radius: var(--radius-large);
  overflow: hidden;
  box-shadow: var(--shadow-2);
  transition: var(--transition-duration-quick) var(--transition-easing-quick);
}
.card:where(:hover, :focus-within){
  box-shadow: var(--shadow-4);
}
.card-banner{
  position: relative;

}
.card-banner .img-holder{
  transition: var(--transition-duration-quick) var(--transition-easing-quick);
}
.card:where(:hover,:focus-within) .img-cover{
  scale: 1.05;
  rotate: 2deg;

}
.card :where(.badge, .icon-btn ){
  position: absolute;
  top: 20px;
}
.card .badge{
  left: 20px;
}
.card .icon-btn{
  right: 20px;
 opacity: 0;
  visibility: hidden;
  scale: 0.8;
  transition: var(--transition-duration-quick) var(--transition-easing-quick);

}
.fav-btn{
  color: var(--error-100);
  cursor: pointer;
}
.fav-btn.active .material-symbols-rounded{
  font-variation-settings: 'FILL'1;
  
  }
.card:where(:hover, :focus-within) .icon-btn {
  scale: 1;
  opacity: 1;
  visibility: visible;
  
}
.card-content{
  padding: 20px 20px 24px;
}
.card-title{
  margin-block: 8px ;
  color: var(--neutral-20);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  transition: var(--transition-duration-quick) var(--transition-easing-quick);

}
.card-title:where(:hover, :focus-visible){
  color: var(--primary-100);
}
.card-meta-list{
  padding-block-start:16px;
  margin-block-start:16px;
  border-block-start: 1px solid var(--neutral-90) ;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.card .meta-item{
  
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--neutral-20);
}
/*------------------*/
/* #HEADER
/*------------------*/

.header{
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 4;
}
.header.active{
  animation:  slide_in 500ms ease forwards ;
  height: 78px;
  background-color: var(--primary-20);
 
}
@keyframes slide_in {
  0%{transform: translateY(-100%);}
  100%{transform: translateY(0);}
}
.header .container{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;

}
 .link-logo{
  width: 70px;
  height: 70px;
  position: absolute;
  
 
}
.logo{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.navbar{
  min-width: 260px;
  position: absolute;
  top: 86%;
  right: 16px;
  padding: 10px;
  border-radius: var(--radius-large);
  background-color: var(--neutral-100);
  visibility: hidden;
  opacity: 0;
  scale: 0.4;
  transition: var(--transition-duration-quick) var(--transition-easing-quick);
  box-shadow: var(--shadow-1);
  transform-origin:top right ;
  z-index:4 ;
  
}
.navbar.active{
  visibility: visible;
  opacity: 1;
  scale: 1;
}
.navbar,
.navbar-list,
.navbar-wrapper{
  display: grid;
  gap: 8px;
}
.navbar-link,
.btn-link{
  color: var(--neutral-30);
  padding: 6px;
  transition: var(--transition-duration-quick) var(--transition-easing-quick);
}
.btn-link{
  border-block-start:1px solid var(--neutral-90);
  padding-block-start:14px ;
}
:is(.navbar-link,.btn-link):is(:hover,:focus-visible),
.navbar-link.active{
color: var(--primary-100);
}
.nav-toggle-btn{
  
  background-color: var(--neutral-95);
  border-radius: var(--radius-medium);
  padding: 10px;
  cursor: pointer;
  box-shadow: var(--shadow-1);
  margin-left: 88%; 
}
.btn-bar{
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px auto;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  background-color: var(--neutral-20);
  
}
.nav-toggle-btn.active .btn-bar:nth-child(2){
  opacity: 0;
}
.nav-toggle-btn.active .btn-bar:nth-child(1){
  transform: translateY(8px) rotate(45deg);
}
.nav-toggle-btn.active .btn-bar:nth-child(3){
  transform: translateY(-8px) rotate(-45deg);
}

/*------------------*/
/* #HERO
/*------------------*/
.hero{
  position: relative;
  background: var(--gradient);
  color: var(--neutral-90);
  padding-block: 130px 60px;
  overflow: hidden;
  isolation: isolate;
}
.hero-title{
  color: var(--neutral-100);
}
.hero-text{
  margin-block: 16px 32px;
}
.search-bar{
  background-color: var(--neutral-100);
  display: grid;
  padding: 8px;
  gap: 8px;
  border-radius: 16px;
  box-shadow: var(--shadow-4);
}
.search-item{
  position: relative;
  color: var(--neutral-20);
}
.search-item .search-item-field{
  height: 76px;
  padding: 40px 16px 12px;
  border-radius:var(--radius-medium);
  transition: var(--transition-duration-quick) var(--transition-easing-quick);
  cursor: pointer;
}
.search-item .search-item-field:where(:hover,:focus){
  background-color: var(--neutral-95);
}
.search-item :where(.label, .material-symbols-rounded){
  position: absolute;
  pointer-events: none;

}
.search-item .label{
  top: 12px;
  left: 16px;
  color: var(--neutral-5);
}
.search-item :where(.label, .icon ){
  position: absolute;
  pointer-events: none;
  
}
.search-item .label{
  top: 12px;
  left: 16px;
  color: var(--neutral-5);
}
.search-item .icon{
  top: 50%;
  right: 16px;
  translate: 0 -50%;
  color: var(--primary-100);
}
.search-btn{
  height: 64px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--primary-100);
  color: var(--neutral-100);
  padding-inline:24px ;
  gap: 12px;
  border-radius: var(--radius-medium);
  transition: var(--transition-duration-quick) var(--transition-easing-quick);
}
.search-btn:where(:hover,:focus){
  background-color: var(--primary-80);
}
.search-btn:where(:active,:focus-visible){
  background-color: var(--primary-70);
}
.hero .bg-pattern{
  min-height: 100%;
  position: absolute;
  top: 50%;
  left: 25%;
  right: 0;
  translate: 0 -50%;
  pointer-events: none;
  z-index: -2;
}
.bg-pattern{
  object-fit: cover;
  filter: opacity(30%);
  
}
.hero-banner{
  display: none;
}
/*------------------*/
/* #PROPERTY SECTION
/*------------------*/
.property{
  padding-block-start:60px ;
 
}
.property .section-text{
  margin-block: 8px 16px ;
  color: var(--neutral-20);
  
}
.property-list{
  display: grid;
  grid-template-columns: repeat(auto-fil,minmax(280px,1fr));
  gap: 16px;
  
}

 /*------------------*/
/* #FEATURE
/*------------------*/
.feature-banner{
  aspect-ratio: 3/2;
  overflow: hidden;
  border-radius: var(--radius-extra-large);
}
.feature-content{
  padding: 24px 16px 0;
 
}
.feature-content .feature-text{
  margin-block:16px;  
 
}
.feature-text .feature-item{
  color: var(--neutral-30);
}
.feature-list {
  display: grid;
  gap: 12px;

}
.feature-item{
  display: flex;
  align-items: center;
  gap: 8px;
}
.bi-check-circle {
  color: var(--primary-100);
  font-size: 2.2rem;
}
 /*------------------*/
/* #VIDEO
/*------------------*/
.video-card{
  height: 260px;
  border-radius: 32px;
  background: linear-gradient(0deg,#0000004D,#0000004D), url('../img/video.jpg') ;
  background-repeat: no-repeat;
  background-size: cover;
  display: grid;
  place-items: center;
}
.play-btn{
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  background-color: var(--neutral-100);
  color: var(--neutral-80);
  border-radius: var(--radius-circle);
  animation:pulse 1.5s var(--transition-easing-quick) forwards infinite;
}
@keyframes pulse {
  0%{box-shadow: 0 0 0 0 #ffffff80;}
  100%{box-shadow: 0 0 0 20px #ffffff00;}

}
.play-btn .bi-play-circle-fill{
  font-size: 4rem;
  font-variation-settings: 'FILL' 1;
  

}
 /*------------------*/
/* #STORY
/*------------------*/
.story .section-subtitle{
  color: var(--primary-100);
}
.story .section-title{
  margin-block:12px ;
}
.list-avatar{
  display: flex;
}
.avatar{
  position: relative;
  width: 60px;
  height: 46px;
  border-radius:var(--radius-full) ;
  border: 3px solid var(--neutral-98);
  overflow: hidden;
}
.avatar:not(:first-child){
  margin-inline-start: -10px;
}
.avatar .overlay-content{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background-color: #000000Bf;
  color: var(--neutral-100);
}
.story .title-wrapper{
  display: grid;
  gap: 16px;
}
.store-list{
  display: grid;
  gap: 16px;
}
.story-card{
  height: 366px;
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border-radius: var(--radius-large);
  overflow: hidden;
  transition: var(--transition-duration-quick) var(--transition-easing-quick);


}
.story-card:where(:hover,:focus-visible){
  scale: 0.99;
}
.story-card .overlay-content{
  position: absolute;
  inset: 0;
  background:  linear-gradient(180deg,#00000000 33.33%, #000000cc 100%);
  color: var(--white);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 24px;
}
.story-card .rating-wrapper{
  display: flex;
  align-items: center;
  margin-block-start:8px;

}
.story-card .rating-text{
  margin-inline-start:12px ;
  color: var(--neutral-80);

}
.story-card .material-symbols-rounded{
  font-variation-settings:'FILL'1;
  color: var(--yellow);

}
.story-card .card-avatar{
  width: 56px;
  height: 56px;
  border-radius: var(--radius-circle);
  box-shadow: var(--shadow-3);
  overflow: hidden;
  
}
/*------------------*/
/* #FOOTER
/*------------------*/
.footer{
  background-color: var(--primary-20);
  color: var(--neutral-90);

}
.footer-top .container{
  padding-block: 60px;
  gap: 24px;
  display: grid;
 
}
.logo-footer{
  width: 200px;
  height: 200px;
  
}
.img-logo{
  width: 100%;
  
}
.footer-text{
  margin-block: 16px;
}
.footer-list-title{
  margin-block-end:16px ;

}
.footer-list{
  display: grid;
  gap: 16px;
}
.footer-link{
  transition: var(--transition-duration-quick) var(--transition-easing-quick);
 
  color: var(--neutral-60);

}
.footer-link:where(:hover,:focus-visible){
  color: var(--primary-100);
}
.social-list{
  display: flex;
  gap: 16px;
}
.footer-bottom{
  border-block-start: 1px solid var(--neutral-20);

}
.footer-bottom .container{
  padding-block:20px ;
  display: grid;
  justify-content: center;
}

/*
- Responsividade para grandes os 769px
*/
@media (min-width:768px) {
  /*
  * custom property
  */
  :root{
    /**
    *Typography
    */

   /*font size*/
  
   --fs-headline-large: 5.2rem;
   --fs-headline-medium: 4rem;
   --fs-headline-small: 3.6rem;

   /*line height*/
   --lh-headline-large: 64px;
   --lh-headline-medium: 52px;
   --lh-headline-small: 48px;

  }
  /*
  * REUSED STYLE
  */
  .container{
    max-width: 720px;
  }
  .section{
    padding-block-end:80px ;
  }
  .title-wrapper,
  .story .title-wrapper
  {
  
  display: grid;
  grid-template-columns: 1fr max-content;
  align-items: center;
  gap: 40px;
  margin-block-end: 48px;
 
  }
  /*HEARD*/
  .link-logo{
    width: 73px;
    height: 73px;
  }

  .nav-toggle-btn{
   margin-left: 86%; 
  
  }
  /*
  #HERO
  */
  .hero{
    padding-block: 160px 100px;
  }
  .search-bar{
    grid-template-columns: 160px 160px 1fr max-content;
    gap: 0;
  }
  .search-item .material-symbols-rounded{
    display: none;
  } 
  .search-item:not(:last-of-type)::after{
   content: '';
   position: absolute;
   top: 16px;
   left: 100%;
   bottom: 16px;
   width: 1px;
   background-color: var(--neutral-20);
  }
  .search-btn{
    height: 100%;
    margin-inline-start:8px ;
  }
  /*
  #PROPERTY
  */
   .property{
    padding-block-start: 80px;
   }
   .property .section-text{
    margin-block-end:0 ;
   }

  .property-list{
    display: grid;
    grid-template-columns: 1fr 1fr ;
  }
   /*
  #FEATURE
  */
  .feature-content{
   padding-block-end: 32px;
  }
  .feature-content .feature-text{
    margin-block:16px 24px;
    line-height: 24px;
  }
.feature-list{
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
/*
  #VIDEO
  */
  .video-card{
    height: 400px;
  }
  .play-btn{
    width: 96px;
    height: 96px;
  }
  .play-btn .material-symbols-rounded{
    font-size: 4.8rem;
  }
  /*
  #STORY
  */
  .story .section-title{
    margin-block:16px ;
  }
  .avatar{
    width: 80px;
    height: 60px;
  }
  .store-list{
    grid-template-columns: 1fr 1fr;
  }
   /*
  #FOOTER
  */
  .footer-top .container{
    padding-block:80px ;
    grid-template-columns: repeat(3,1fr);
   
  }
  .footer-brand{
    grid-column: 1/5;
  }
  .footer-text{
    max-width: 400px;
  }
}
/*
- Responsividade para grandes os 992px
*/
@media (min-width:992px){
  /*
    * custom property
    */
    :root{
       /**
      *Typography
      */
  
     /*font size*/
      --fs-body-large: 1.6rem;
      
      
      /*line height*/
      
      --lh-body-large: 32px;
    
  
    }
    /**
    *REUSED STYLE
    */
    .container{
      max-width: 950px;
  
    }
    /**
    * HEADER
    */
    .nav-toggle-btn{
      display: none;
      
    }
    .navbar,
    .navbar-list,
    .navbar-wrapper{
      all: unset;
      display: flex;
      align-items: center;
    
  
    }
    .navbar-wrapper{
      color: var(--neutral-80);
    }
    .navbar,
    .navbar-list{
      flex-grow:1 ;
    }
    .navbar-list{
      
      justify-content: center;
    }
    .btn-link,
    .navbar-list,
    .navbar-link{
      color: var(--neutral-80);
      line-height: 48px;
      
    }
    .navbar-list{
      padding: 0 24px;
    }
    :is(.navbar-link,.btn-link):is(:hover,:focus-visible),.navbar-link.active{
    color: var(--neutral-100);
    }
    .navbar-link.active{
     position: relative;
    }
    .navbar-link.active::before{
      content: "";
      position: absolute;
      left: 50%;
      translate: -50% 0;
      bottom: 8px;
      width: 4px;
      height: 4px;
      border-radius: var(--radius-circle);
      background-color: var(--neutral-100);
  
  
    }
    .btn-link{
      color: var(--neutral-100);
      border: none;
      padding: 0;
    }
    .navbar .btn{
      min-width: max-content;
    }
    .navbar-wrapper{
      gap: 24px;
    }
    /**
    * HERO
    */
    .hero .container{
      display: grid;
      grid-template-columns: repeat(12,1fr);
      gap: 20px;
    }
    .hero-content{
      grid-column: 1/7;
      
    }
    .search-bar{
      min-width: max-content;
      grid-template-columns:  160px 220px 1fr max-content;
    }
    .search-item .search-item-field{
      height: 84px;
      padding-inline:24px;
      padding-block-end:16px ;
    }
    .search-item .label{
      top: 16px;
      left: 24px;
    }
    .search-item .material-symbols-rounded{
      display: block;
      right: 24px;
    }
    .hero-banner{
      max-width: 720px;
      display: block;
      position: absolute;
      bottom:0;
      left: 50%;
      z-index: -1;
    }
    /**
    * PROPERTY
    */
    .property .section-text{
      max-width: 640px;
     
    }
    .property-list{
      display: grid;
      grid-template-columns:repeat(3,1fr);
    }
     /**
    * FEATURE
    */
    .feature .container{
      display: grid;
      grid-template-columns: repeat(2,1fr);
      gap: 20px;
    }
    .feature-content{
      padding: 40px;
    }
    .feature-list{
      grid-template-columns: 1fr;
    }
    .feature-banner{
      aspect-ratio: auto;
      background-color: rebeccapurple;
    }
    .feature-2 .feature-banner{
      order: 1;
    }
}
/*
- Responsividade para grandes os 992px
*/
@media (min-width:1440px){
  /*
  * custom property
  */
  :root{
    /**
   *Typography
   */
 /*font size*/

--fs-headline-large: 7.2rem;
--fs-headline-medium: 5.4rem;
--fs-headline-small: 2.8rem;


/*line height*/
--lh-headline-large: 92px;
--lh-headline-medium: 72px;

 

 }
 /**
  *REUSED STYLE
  */
  .container{
    max-width: 1460px;
  }
   /**
  * HEADER
  */
  .header.active{
    animation:  slide_in 500ms ease forwards ;
    height: 88px;
    
    background-color: var(--primary-20);
   
  }
  .hero .container{
    min-height: 580px;
    align-items: center;
  }
  .hero-content{
    grid-column: 1/6;
  }
  .hero-banner{
    max-width: 820px;
    width: 100%;
    left: calc(50% -108px);
  }
  .hero .bg-pattern{
    left: 38%;
  }
   /**
  * FEATURE
  */
  .feature-content{
    padding: 60px;
    
  }
  .feature-list{
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
   /**
  * VIDEO
  */
  .video-card{
    height: 360px;
    background-position: bottom;
   
  }

  /**
  * STORY
  */
  .story .section-title{
    max-width: 820px;
  }
  .store-list{
    grid-template-columns: repeat(12,1fr);
  }
  .story-card:where(:nth-child(1),:nth-child(6)){
    grid-column: span 3;
  }
  .story-card:where(:nth-child(3),:nth-child(5)){
    grid-column: span 4;
  }
  .story-card:where(:nth-child(2),:nth-child(4)){
    grid-column: span 5;
  }
  /**
  * FOOTER
  */
  .footer-brand{
    grid-column:  auto;
  }
  .footer-top .container{
    grid-template-columns: 580px repeat(3,1fr);
  }
}