:root {
        --c-bgr: #242424;
        --c-primary: #dab9c0;
        --c-text: #fefefe;
        --c-text-alt: #242424;
        --grid-column-gap: 1rem;
         /* --text-max-w:none; */
         --space-section-x:2rem;
        --layout-max-w: 1400px;
        --fs-body:var(--fs-lg);
        --fs-header:var(--fs-base);
        --fs-heading:var(--fs-xxl8);
        --ff-sans: "lato", sans-serif;
        --ff-serif: "superior-title-black", serif;
        --pg-img-height:300px;
        --separator-size:30px;
        --separator-space:2rem;

        /* --ff-serif: 'SuperiorTitleBlack', 'superior-title', serif; */

      }

@media (width < 960px) {
    :root{
        --fs-body:var(--fs-base);
        --fs-header:var(--fs-sm);
        --space-section-top:4rem;
        --space-section-x:1rem;
        --fs-heading:var(--fs-xxl4);
        --pg-img-height:200px;
        --separator-size:20px;
        --separator-space:2rem;
    }    
}      
      body {
        background: var(--c-bgr);
        color: var(--c-text);
        font-size: var(--fs-body);
        font-family: var(--ff-sans);

        font-weight: 400;

        -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      }
      nav{
        text-transform: uppercase;
        
      }
      h2 {
        font-size: var(--fs-heading);
        font-family: var(--ff-serif);
        font-style: italic;
        color: var(--c-primary);
        line-height: 1;
        font-weight: 400;
         
        /* text-transform: lowercase; */
      }
      .logo {
        width: 160px;
      }
      header {
        display: grid;
        grid-template-columns: repeat(3,1fr);
        width: 100%;
        /* justify-content: space-between; */
        padding: 2rem var(--page-padding-x);
        font-size: var(--fs-header);
      }
      header .logo{
        justify-self: start;
      }
      header .intro{
        justify-self: center;
      }
      header .main-nav{
        justify-self: end;
      }


     


      .intro {
        display: flex;
        justify-content: space-between;
        gap: 2rem;
      }
      .intro p {
        max-width: 17ch;
        margin-top: 0;
      }
      .whyme p,
      .aboutme p {
        font-size: var(--fs-body);
      }

      
      a {
        color: var(--c-primary);
        text-decoration: none;
         transition: color .3s ease-in-out
      }

      
        a:hover{
            
            color:var(--c-text);
        }
      nav ul {
        list-style: none;
        padding: 0;
        li {
          padding: 0;
        }
      }

      .demo{
        /* background: var(--c-primary); */
        gap: .3rem;
        padding:.3rem;
        img{line-height: 0;}

      }

      .portfolio-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: auto;
        gap: 1rem;
        margin-top: 2rem;
        margin-bottom: 1rem;

      }
      .pg-img {
        height: var(--pg-img-height);
        object-fit: cover;
      }
      .pg1 {
        grid-column: 1/3;
        grid-row: 1/1;
      }
      .pg2 {
        grid-column: 3/4;
        grid-row: 1/1;
      }
      .pg3 {
        grid-column: 4/5;
        grid-row: 1/1;
      }

      .pg4 {
        grid-column: 1/1;
        grid-row: 2;
      }
      .pg5 {
        grid-column: 2/2;
        grid-row: 2;
      }
      .pg6 {
        grid-column: 3/5;
        grid-row: 2;
      }
      .events-feature {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
      }
      .events-feature-img {
        grid-column: 1;
        grid-row: 1;
      }
      .events-list {
        color: var(--c-primary);
        font-size: var(--fs-xxl3);
        line-height: 1;
        font-style: italic;
        font-family: var(--ff-serif);
        grid-column: 1;
        grid-row: 1;
        list-style: none;
        align-self: end;
        transform: translate(-5ch, -2lh);
      }

      .text.nomaxwidth {
        max-width: none;
      }

      .testimonials-text {
        width: 75%;
        margin-left: auto;
        background-color: var(--c-primary);
        color: var(--c-text-alt);
        padding: 4rem 8rem;
        font-size: var(--fs-xxl2);
        font-family: var(--ff-serif);
        line-height: 1.2;
        font-style: italic;
      }
      cite{
        margin-top:1rem;
        display: block;
        text-align: right;
        font-size:.8em;
      }
      .testimonials-text:before {
        --size: 120px;
        content: " ";
        display: block;
        width: var(--size);
        height: var(--size);
        background-color: red;
        position: absolute;
        transform: translateX(calc(-8rem - var(--size) - 20px));
        background: url(img/quotemark.svg) no-repeat;
        background-size: var(--size);
      }


      .offer-grid {
        margin-top: 12rem;
      }

      .offer-grid ul {
        margin-top: 2rem;
        list-style: none;
      }

      .media-column img.aboutme-img{
        /* min-height: 450px; */
        height: 65vh;        
        /* object-fit: contain; */
        display: block;
      }

      footer {
        background-color: var(--c-primary);
        color: var(--c-text-alt);
        padding-bottom:1rem;
        font-size: var(--fs-sm);

        a {
          color: var(--c-text-alt);
        }
      }
      .footer-links{
            display: flex;
    justify-content: space-between;
      }
      .footer-logo {
        width: min(80%, 900px);
        margin: 8rem auto;
        display: block;
      }
      footer .socials{
        
      }
      footer .socials .icon {
        cursor: pointer;
        width:40px;
        height:40px;
        margin:.5rem;
      }

    .slideshow-container{
        margin:3rem 0;
    }

      .separator{
        display: inline-block;
        width:var(--separator-size);
        height:var(--separator-size);
        background-color: var(--c-primary);
        border-radius: 100%;
        text-indent: -9999px;
        margin:0 var(--separator-space);
      }
      .slide{
        display: flex;
        align-items: center;
        font-size: var(--fs-xxl5);
      }



       .triplet .column .media {
        height: 100%;
      }
      .triplet .column .media img{
        height: 100%;
        object-fit: cover;
      }

      .media-text .text-column{
        max-width: var(--text-max-w);
      }


      .contact-list{
        margin-top:2rem;
        list-style: none;
      }

    
 @media (width < 960px){
        
  .hero{
    max-height:65vh;
  }
      header{
          grid-template-columns: repeat(2,1fr);
      }
      header .logo{
        grid-column: 1;
        grid-row: 1;
      }
      header .intro{
        grid-row: 2;
        grid-column: 1/3;
      }
      header .main-nav{
        grid-column: 2;
        grid-row: 1;
      }
      .intro{
        display: none;
        /* flex-direction: column; */
        gap:0;
        padding-top: 1rem;
      }
      .intro p{
        display: inline;
        max-width: none;
      }
      .intro p:last-child{
        display: none;
      }
      

      .portfolio-grid{
        grid-template-columns: repeat(2,1fr);

      }
       .pg1 {
        grid-column: 1/3;
        grid-row: 1/1;
      }
      .pg2 {
        grid-column: 1/2;
        grid-row: 2;
      }
      .pg3 {
        grid-column: 2/3;
        grid-row: 2;
      }

      .pg4 {
        grid-column: 1/3;
        grid-row: 3;
      }
      .pg5 {
        grid-column: 1/2;
        grid-row: 4;
      }
      .pg6 {
        grid-column: 2/3;
        grid-row: 4;
      }


      .container.narrow{
        grid-column:var(--grid-column);
      }
      .testimonials-text{
        padding:2rem;
        font-size: var(--fs-lg);
      }
        .testimonials-text:before {
          --size:80px;
              transform: translateX(calc(-2rem - var(--size) - 20px));
        }
        
      .events-list{
        transform:translate(-10px,-1lh);
        font-size: var(--fs-lg);
      }

      .slide{
        font-size: var(--fs-lg);
      }

      .footer-links{
        flex-direction: column;      
        text-align: center;
      }

      footer .copyrights{
        margin-top:2rem;
        /* text-align: left; */
        font-size: .9em;
      }

      .slideshow-container {
    margin: 1rem 0;
}
}