:root {
    --accent-txt: hsl(0, 0%, 91%);
    --accent: hsl(0, 0%, 29%);
    --accent-100: hsl(137, 63%, 59%);
  
    --accent-800: hsl(137, 51%, 32%);
    --copy: #fff;
    --light-on-dark: #2b60d3;
    --is-white: #fff;
    --light-tone: hsl(134, 95%, 76%);
    --lighter-tone: hsl(147.6deg 33.87% 74.81%);
    --dark: #222;
    --body: hsl(225, 13%, 30%);
    --light-accent: hsl(222, 11%, 64.3%);
    --lighter-accent: hsl(220, 25.7%, 93.1%);
  }


/*--------------------------------------------
     CONTENTS header
    ----------------------------------------------*/

  
    
    .contents-wrapper {
        max-width: 1024px;
        margin: 0 auto;
        padding: 1rem;
    }
    
    @media screen and (min-width: 600px) {
        .contents-wrapper {
            padding: 1.8rem;
            display: grid;
        }
        .contents-wrapper *>img:not(.img-card) {
            display: block;
            width: 100%;
        }
    }

  


    
    .contents-header {
        display: grid;
        grid-template-columns: 1fr;
        grid-gap: 18px;
        margin-bottom: 1.8rem;
    }
    
    @media screen and (min-width: 480px) {
        .contents-header {
            grid-template-columns: 1fr 1fr;
        }
    }
    
    .contents-header p {
        margin-bottom: 1rem;
    }
    
    .contents-header hr {
        border-top: rgba(134, 134, 134, 0.1) 1px dotted;
    }
    
    .contents-header h1,
    .contents-header h2 {
        margin: 0;
        padding: 0;
    }
    
    .contents-header p {
        font-size: 1.1rem;
    }

    .contents-header img {
        max-width: 240px;
        height: auto;
        margin-bottom: 1.8rem;
        box-shadow: 0px 0px 25px rgb(0 0 0 / 15%);
      }
      
    

    .logo {
        width: 280px;
    height: 25px;
    display: flex;

    }

    .logo img {
        object-fit:contain;
        margin-right:.5rem;
    }

    .logo span {
        font-size:.9rem;
        margin-top:.2rem;
    }
    
    /*  ------------------------------
      CONTENTS - image & page numbers
       -------------------------------*/
    
    .contents-image {
        position: relative;
    }
    
  
    
    

  
    
    /* ------------------------------
      CONTENTS - Footer
      ------------------------------*/
    
    .contents-footer {
        width: 100%;
display: flex;
        margin: 0 auto;
        background: var(--lighter-accent);
        padding: 2rem;
           justify-content: center;
            flex-direction:column;
    }
    
.contents-footer>div {
    padding:1rem;
    background: hsl(222deg 40% 97%);
    border-radius:.3rem;
    max-width: 480px;
    width: 100%;
    
}
    
    .contents-heading {
        margin: 0 auto 1rem;
    }
    
    @media screen and (min-width: 600px) {
        .contents-footer {
           flex-direction: row;
            gap: 1rem 1.8rem;
            max-width: 100%;
            padding: 1rem;
            flex-wrap:wrap;
     
        }
        .contents-heading {
            max-width: 100%;
        }
        
.contents-footer>div {
    max-width:320px;
}
    
    }
    
    .contents-footer>*>ul {
        list-style: none;
        padding: 0;
        margin: 0.5rem 0 1rem;
    }
    
    .contents-footer>div>h3 {
        padding: 0;
        margin: 0;
    }
    
    .contents-footer>div>p {
        margin: 0.5rem 0 1rem;
    }
    
  
    
    .contents-footer>*>ul>li,
    .contents-footer>div>p {
        padding-bottom: 0.5rem;
        font-size: 80%;
    }
    
    .contents-footer a {
        color: var(--accent);
    }
    
    .contents-footer>.membership {
        background: hsl(222deg 40% 97%);
    }
    

    @media screen and (min-width: 700px) {
        .contents-footer {
           flex-direction: row;
            gap: 1.8rem;
            max-width: 100%;
            padding: 1.8rem;
            flex-wrap:wrap;
     
        }
    }
    /* ------------------------------
      CONTENTS LAYOUT CONFIGURATIONS
      ------------------------------ */
    
      .content-thumbs {
        position: relative;  
      margin: 1rem 0;
  overflow:hidden; 
          
          
      }
    
    .content-thumb {
         position: relative;
    background-color: #34384c;
       max-width:300px;
       margin: 0;
          border-radius: 5px;
    overflow: hidden;
    }
    
    
   /*@media (min-width:680px)  {*/
       
       .content-thumbs {
           display: flex;
           flex-wrap: wrap;
           gap:1rem;
           justify-content: flex-start;
        
       }
       
.content-thumb {
   
    display:grid;
    grid-template-rows: repeat(2, minmax(50%, 1fr));
   
  
}
       
   /*} */
    
    
    
    
    
    
  @media (min-width:1074px)  {
      
    .content-thumbs {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
        gap: 1rem; /* Optional: adds space between items */
} 

.content-thumb {
   
    display:grid;
    grid-template-rows: repeat(2, minmax(50%, 1fr));
    max-width: none;
  
}




  }



.page-number {
    position: absolute;
    right: 0;
    top: 0;
    padding: 0.6rem;
    background: #34384c;
    color: var(--is-white);
    border-radius: 0 0 0 5px;
}

@media (min-width: 600px) {
    .page-number {
        font-size: 100%;
    }
}

  
.img-card {
    display: flex;
    object-fit: cover;
    width: 100%;
    height:100%;

}

.img-card img {
    display:flex;
    object-fit: cover;
    width: 100%;
    overflow: hidden;
    

}

.content-desc {
    height: 225px;
    width: 100%;

    padding: .5rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.content-desc p {
    color: var(--is-white);
    font-size: 80%;
}