:root{
  --lav-1:#efe9f9;
  --lav-2:#d7c7f0;
  --lav-3:#b49fe0;
  --accent:#6f57b6

}
html,body{
	font-size:80px
	  background-repeat:no-repeat;
  height:100%;
  margin:0;
  font-family:'Josefin Sans',Arial,sans-serif;
  background:radial-gradient(1000px 380px at 50% 6%,var(--lav-1),var(--lav-2) 30%,var(--lav-3) 60%,#9a79d6 100%);
  background-attachment:fixed;
  color:#2b2340
}
body{
	  background-repeat:no-repeat;
	display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding-top:6vh;
  text-align:center
}
.page{
  max-width:1200px;
  margin:18px auto;
  padding:28px
}
.site-header{
  display:flex;
  align-items:flex-start;
  gap:20px;
  justify-content:center
}
.site-header h1{
  font-family:'Josefin Sans',Arial,sans-serif;
  font-size:112px;color:#fff;
  margin:0 0 48px 0;
  line-height:.86;
  text-shadow:0 8px 24px rgba(0,0,0,.28)
}
.site-header h1 {
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 80px;
    color: #6f57b6;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    text-align: center;
    margin-bottom: 20px;
}
.content-grid{
  display:grid;
  grid-template-columns:360px 1fr;
  gap:36px;
  align-items:start;
  margin-top:18px ; 
}
.content-grid figure{
  margin:0
}
.content-grid img{
  width:100%;
  height:auto;
  display:block;
  border-radius:6px;
  box-shadow:0 12px 30px rgba(41,28,78,.22)
}
.content-grid p{
  font-size: 18px;
  line-height: 1.6;
  color: #2b2340;
  text-align: justify;
  margin:0 0 18px
}
.full-width{
  grid-column:1/-1;
  text-align:center;
  font-size:30px;
  line-height:1.9;
  padding-top:18px
}
.icons{
  width:80%;
  max-width:1100px;
  margin:40px auto 0
  ;display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:30px
}
.icon{
	 font-family: "Montserrat", sans-serif;
	
  width:30%;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.icon figcaption{
  margin:0 0 12px 0;
  font-size:18px;
  color:#111 ;
}
.icon img{
  max-width:260px;
  width:100%;
  height:auto;
  display:block
}
@media (max-width:900px){
  .content-grid{
    grid-template-columns:1fr
  }
  .site-header{
    font-size:64px;
    text-align:center;
    justify-content:center
  }
  .full-width{
    text-align:left
  }
}

@media{ (max-width:700px)
{
  .icons{
    flex-direction:column;
    gap:20px;
    width:90%
  }
  .icon{
    width:100%
  }
}


.media-row{
  display:grid;
  grid-template-columns:360px 1fr;
  gap:36px;
  align-items:center;
  margin:40px 0
}
.media-row figure{
  margin:0
}
.media-row .media-img{
  width:100%;
  height:auto;
  display:block;
  border-radius:8px
}
.media-row{
  display:grid;
  grid-template-columns:280px 1fr;
  gap:36px;
  align-items:center;
  margin:40px 0
}
.media-row figure{
  margin:0
}
.media-row .media-img{
  width:100%;
  max-width:280px;
  height:auto;
  display:block;
  border-radius:8px
}

.article-block.media-with-img{
  display:flex;
  flex-direction:row;
  gap:24px;
  align-items:flex-start
}
.inline-img{
  width:160px;
  max-width:40%;
  height:auto;
  display:block;
  border-radius:8px
}
@media (max-width:900px){
  .media-row
  {
    grid-template-columns:1fr;
    gap:20px
  }
  .article-block.media-with-img{
    flex-direction:column
  }
  .inline-img{
    max-width:100%;
    width:100%
  }
}


.container {
    display: flex; 
    align-items: center; 
  gap: 20px; 
  margin: 60px 0;
}


.container img {
    max-width: 100px; 
    height: auto; 
}


.container p, .container-reverse p {
  margin: 0; 
  padding: 18px 0; 
  line-height:1.6;
}


.container-reverse {
    display: flex; 
    align-items: center;
    gap: 20px; 
    flex-direction: row-reverse;
}


.container img, .container-reverse img {
    max-width: 150px;
    height: auto; 




.hero-title{
  font-family: 'Luckiest Guy', cursive;
  font-size:110px;
  color:#5a238f;
  margin:12px 0 8px 0;
  text-shadow: 0 6px 0 rgba(255,255,255,0.06), 0 8px 18px rgba(0,0,0,0.25);
}

.left-illustration{ 
  width:420px;
   position:relative;
    min-height:360px 
  }
.left-illustration .strawberry{
   position:absolute;
    border-radius:16px;
     box-shadow:0 12px 30px rgba(0,0,0,.25)
    }
.left-illustration .strawberry.big{
   width:360px;
    height:220px; 
    left:0;
     top:10px;
     background: radial-gradient(circle at 30% 30%, #ff6b6b, #d83b3b);
      border-radius:48px ;
     }
.left-illustration .strawberry.small{
   width:180px;
    height:120px;
     left:40px; 
     top:80px;
      background: radial-gradient(circle at 40% 30%, #ff7b7b, #dd4949); 
      transform:rotate(-12deg);
       border-radius:36px ;
      }
.left-illustration .leaf{
   width:260px;
    height:140px;
     left:-30px;
      top:160px;
       background: linear-gradient(120deg,#1f8a2f,#2fb84a);
        transform: rotate(-18deg);
         border-radius:18px;
          box-shadow: inset 0 -6px 20px rgba(0,0,0,.15) ;
      }
.left-illustration .loupe{
   width:84px;
    height:84px;
     border-radius:50%; 
     right:36px; 
     top:120px;
      position:absolute;
       background:rgba(255,255,255,0.18);
        border:6px solid rgba(255,80,80,0.85);
         box-shadow:0 8px 20px rgba(0,0,0,.22);
        }

.content{
   flex:1;
    color:#3a2b4f ;
     font-size:18px;
      line-height:1.8;
       text-align:left;
        padding-top:12px;
         }
   }
.lead{ 
font-weight:700;
 color:#4a3a67;
 font-size:22px;
 line-height:1.25;
 margin-bottom:18px
 }
.columns{ 
column-count:2;
 column-gap:48px; 
 font-size:16px;
 line-height:1.8; 
 color:#4a3a67 
 }
.columns p{ 
break-inside:avoid;
 margin:0 0 18px
 }


@media (
max-width:900px)
{
  .wrap{
	  flex-direction:column;
	  padding:0 18px
	  }
  .left-illustration{
	  width:100%;
	  min-height:220px
	  }
  .hero-title{
	  font-size:72px;
	  text-align:center
	  }
  .columns{
	  column-count:1
	  }
}

.content-grid {
    display: grid;
    
    gap: 20px;
    align-items: start;
    margin: 20px;
    padding-right: 40px;
}

.content-grid figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.content-grid img {
    width: 100%;
    border: 5px solid #6f57b6;
    border-radius: 10px;
    margin-bottom: 10px;
}

.content-grid figure img + img {
    margin-top: 20px; 
}
.fef{
  
  display:flex;
  flex-direction:column;
  gap:66px;
}
a{
 text-decoration:none;
 font-family:'Montserrat',sans-serif ;
}