@import url('https://fonts.googleapis.com/css2?family=Rubik+Gemstones&display=swap');

* { min-width:0; max-width:100%; box-sizing:border-box; }

:root {
  --max-width:1140px;
}

header, .grid { padding:2rem calc( (100vw - var(--max-width)) / 2);}

body { font-family: system-ui; background: #fafafa; 
    margin: 0rem; 
}

a { color:inherit; text-decoration:none; }

header { 
  background:#c00;
  display: flex;
  justify-content:space-between;
  align-items:center;
}

#logo {
  font-family:'Rubik Gemstones';
  font-size:50px;
  color:white;
  padding-left:50px;
  position:relative;
}
#logo span {
  position:absolute;
  left:5px;
  top: -40px;
  z-index:0;
}
#logo:before {
  content: ' ';
  display: inline-block;
  position:absolute;
  z-index:10;
  left:0;
  _background: url('https://cdn-icons-png.freepik.com/256/16601/16601593.png?semt=ais_white_label') center top 0px no-repeat;
  background: url('https://files.softicons.com/download/holidays-icons/christmas-icon-set-by-mkho/png/128x128/Bell.png') center top 0px no-repeat;
  background-size: cover;
  height:100px;
  width:100px;
  margin-right:10px;
  _margin-top:10px;
  transform:translate(-30px, -20px);
}

nav {
  ;
}

nav a {
  color: white;
  margin-left:1.5rem;
  font-size:0.8rem;
  font-weight:600;
  text-transform:uppercase
}

#hambi {
  content: '\2263';
}

h1 { text-align:center}

svg {
  height:36px;
}

.shopping { 
  background: url('file:///C:/Users/MeszarosGabor6/Downloads/package.svg');
  background-size:cover;
  display:inline-block;
  height:24px;
  width:24px;
}

.grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fill,minmax(250px,1fr)); 
  gap: 1.5rem; 
}

.full-row {
  grid-column: 1 / -1;
  background: #eef;
  text-align: center;
}

.card {
  background: white; border-radius: 1rem; box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .2s;
}

.card:hover { transform: translateY(-4px); }

.card img { width: 100%; min-height: 180px; height:180px; object-fit: cover; }

.card-body { padding: 1rem; flex: 1; display: flex; flex-direction: column; }

.card h3 { margin: 0 0 .5rem; font-size: 1.1rem; }

.category { font-size: .85rem; color: #666; margin-bottom: .5rem; }

.price { font-weight: bold; margin-top: auto; color: #b40000; }

.rating { color: #e2b007; font-size: .9rem; }


@media screen and (width < 1040px)
{
  #logo { font-size:30px;}
  #logo:before {
    width:60px;
    height:60px;
    transform:translate(0px);
  }

  header, .grid { padding:2rem 1rem;}
}

@media screen and (width < 820px) {
  #hambi { display:flex;}
  nav { display:none; }
  #logo span { left:45px; top: -20px; }
}

'https://wpthemes.themehunk.com/christmas-gifts/'
'https://picsum.photos/400/200'