* {
  box-sizing: border-box;
  }

body {
margin: 0;
min-height: 100vh;

font-family: Arial, Helvetica, sans-serif;

background:
    repeating-linear-gradient(
        0deg,

        #e8f0f5 0px,
        #e8f0f5 48px,

        #f7f7f7 48px,
        #f7f7f7 96px,

        #f3e8e8 96px,
        #f3e8e8 144px,

        #f7f1d9 144px,
        #f7f1d9 192px,

        #e8f0e8 192px,
        #e8f0e8 240px
    );

color: #222;
  

}

/* -------------------------
Top navigation
------------------------- */

.top-bar {
width: 100%;

  
height: 78px;

padding:
    0 34px;

display: flex;

align-items: center;

background:
    rgba(
        255,
        255,
        255,
        0.94
    );

border-bottom:
    1px solid #dcdcdc;

box-shadow:
    0 2px 8px
    rgba(
        0,
        0,
        0,
        0.04
    );
  

}

/* -------------------------
Sakhams Logo
------------------------- */

.home-link {
display: flex;

  
align-items: center;

flex-shrink: 0;

text-decoration: none;
  

}

.home-link img {
display: block;

  
width: 155px;

height: auto;

transition:
    opacity 0.15s,
    transform 0.15s;
  

}

.home-link:hover img {
opacity: 0.75;

  
transform:
    translateY(-1px);
  

}

/* -------------------------
Current Page
------------------------- */

.page-title {
margin-left: 32px;

  
padding-left: 32px;

border-left:
    1px solid #d2d2d2;

color: #555;

font-size: 15px;

font-weight: 600;

letter-spacing:
    0.7px;

text-transform: uppercase;

white-space: nowrap;
  

}

/* -------------------------
Main content
------------------------- */

.container {
width: 90%;
max-width: 1000px;

  
margin: 0 auto;

padding: 60px 0;
  

}

h1 {
text-align: center;

  
margin:
    0 0 10px 0;

font-size:
    clamp(
        2.5rem,
        6vw,
        4rem
    );
  

}

.description {
text-align: center;

  
font-size: 1.1rem;

margin:
    0 0 50px 0;

color: #555;
  

}

/* -------------------------
Collections
------------------------- */

.collections {
display: grid;

  
grid-template-columns:
    repeat(
        auto-fit,
        minmax(250px, 1fr)
    );

gap: 25px;
  

}

.collection {
display: flex;

  
flex-direction: column;

background:
    rgba(
        255,
        255,
        255,
        0.85
    );

border: 1px solid #ddd;

border-radius: 15px;

padding: 30px;

text-align: center;

text-decoration: none;

color: #222;

box-shadow:
    0 3px 10px
    rgba(
        0,
        0,
        0,
        0.06
    );

transition:
    transform 0.15s,
    box-shadow 0.15s;

aspect-ratio: 1 / 1;
  

}

.collection:hover {
transform:
translateY(-3px);

  
box-shadow:
    0 6px 16px
    rgba(
        0,
        0,
        0,
        0.10
    );
  

}

.collection h2 {
margin-top: 0;

  
margin-bottom: 12px;
  

}

.collection p {
color: #666;

  
line-height: 1.5;

margin-top: 0;

margin-bottom: 25px;
  

}

/* -------------------------
Collection Images
------------------------- */

.collection > img {
width: 100%;

  
aspect-ratio: 1 / 1;

object-fit: contain;

margin-bottom: 20px;
  

}

/* -------------------------
Explore
------------------------- */

.explore {
display: inline-block;

  
margin-top: auto;

padding: 10px 20px;

background: #333;

color: white;

border-radius: 8px;

transition:
    background 0.15s;
  

}

.collection:hover .explore {
background: #555;
}

/* -------------------------
Mobile
------------------------- */

@media (max-width: 600px) {

  
.top-bar {
    height: 68px;

    padding:
        0 20px;
}


.home-link img {
    width: 120px;
}


.page-title {
    margin-left: 20px;

    padding-left: 20px;

    font-size: 13px;

    letter-spacing:
        0.5px;
}


.container {
    padding-top: 40px;
}


.collections {
    grid-template-columns: 1fr;
}
  

}