[data-will-show-delay],
[data-will-show] {
   opacity: 0;
   transform: translateY(30px);
   transition: transform 700ms ease-in-out, opacity 700ms ease-out
}

html.reduced-motion [data-will-show-delay],
html.reduced-motion [data-will-show] {
   transform: translateY(0);
   opacity: 1
}

.tile {
   position: relative;
   background: #fff;
   border-radius: 25px;
   overflow: hidden;
   margin: 0 auto;
   display: flex;
   width: 100%;
   box-sizing: border-box
}

html.safari .tile {
   clip-path: inset(1px 1px 1px 1px round 25px)
}

.tile .tile-content {
   flex: 1;
   width: 100%
}

.tile.tile-dark {
   color: #f5f5f7;
   background: #121213
}

@media only screen and (max-width:374px) {
   .tile {
      border-radius: 0
   }
}

/* BEGIN: LARGE TEXT HEADING */

.section-hero {
   padding-top: 140px;
   padding-bottom: 160px
}

@media only screen and (max-width:1068px) {
   .section-hero {
      padding-top: 140px;
      padding-bottom: 140px
   }
}

@media only screen and (max-width:734px) {
   .section-hero {
      padding-top: 100px;
      padding-bottom: 100px
   }
}

.section-hero strong {
   font-weight: 700;
   font-style: normal
}

.section-hero .strong-inline-block strong {
   display: inline-block
}

.section-hero .strong-inline-block.strong-align strong {
   transform: translateX(-16px)
}

@media only screen and (max-width:1068px) {
   .section-hero .strong-inline-block.strong-align strong {
      transform: translateX(-10px)
   }
}

@media only screen and (max-width:734px) {
   .section-hero .strong-inline-block.strong-align strong {
      transform: translateX(-5px);
      margin-top: 0
   }
}

.section-hero .manifesto-copy {
   margin-bottom: -12px
}

@media only screen and (max-width:1068px) {
   .section-hero .manifesto-copy {
      margin-bottom: -6px
   }
}

/* END: LARGE TEXT HEADING */


/* BEGIN: SECTION FEATURES DEFINATION */

.section-features {
   padding: 0px 25px
}

@media only screen and (max-width:1068px) {
   .section-features {
      padding: 0px 16px
   }
}

@media only screen and (max-width:374px) {
   .section-features {
      padding: 0
   }
}

.section-features .tiles-content {
   margin-left: auto;
   margin-right: auto;
   width: 100%;
   max-width: 1390px
}

@media only screen and (max-width:734px) {
   .section-features .tiles-content {
      max-width: 480px
   }
}

.section-features .tile-album1 {
   grid-area: album1
}

.section-features .tile-album2 {
   grid-area: album2
}

.section-features .tile-album3 {
   grid-area: album3
}

.section-features .tile-album4 {
   grid-area: album4 
}

.section-features .tile-profile1 {
   grid-area: profile1
}

.section-features .tile-profile2 {
   grid-area: profile2 
}

.section-features .tile-profile3 {
   grid-area: profile3
}

.section-features .tile-profile4 {
   grid-area: profile4
}

/* END: SECTION FEATURES DEFINATION */


/* BEGIN: GRID SETUP */


/* Big Screen */

.section-features .grid-wrapper {
   display: grid;
   grid-template-rows: repeat(2, 600px) 0px;
   grid-auto-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
   grid-gap: 25px;
   grid-template-areas: 
      "album1 album1 album1 album1 profile1 profile1"
      "profile2 profile2 album2 album2 album2 album2"
}

.section-features .grid-wrapper-bottom {
   display: grid;
   grid-template-rows: repeat(2, 600px) 15px;
   grid-auto-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
   grid-gap: 25px;
   grid-template-areas: 
      "album3 album3 album3 album3 profile3 profile3"
      "profile4 profile4 album4 album4 album4 album4"
}


/* iPads */

@media only screen and (max-width:1068px) {
   .section-features .grid-wrapper {
      grid-template-rows: 560px 560px 0px;
      grid-gap: 25px;
      grid-template-areas: 
        "album1 album1"
         "profile1 profile2"
         "album2 album2"
         
   }
}

@media only screen and (max-width:1068px) {
   .section-features .grid-wrapper-bottom {
      grid-template-rows: repeat(2, 560px) 560px 10px;
      grid-auto-columns: 1fr 1fr;
      grid-gap: 25px;
      grid-template-areas: 
         "album3 album3"
         "profile4 profile3"
         "album4 album4"
   }
}

/* Mobiles */

@media only screen and (max-width:734px) {
   .section-features .grid-wrapper {
      grid-template-rows: 520px 520px 25px;
      grid-auto-columns: 100%;
      grid-gap: 20px;
      grid-template-areas: "profile1""profile2"
   }
}

@media only screen and (max-width:734px) {
   .section-features .grid-wrapper-bottom {
      grid-template-rows: 520px 5px;
      grid-auto-columns: 100%;
      grid-gap: 10px;
      grid-template-areas: "profile4"
   }
}