:root{
  --space-none: 0px;
  --space-xs: 4px;
  --space-s: 8px;
  --space-base: 16px;
  --space-medium: 20px;
  --space-m: 24px;
  --space-l: 32px;
  --space-xl: 42px;
  --color-body: #eeeeee;
  --color-neutral-0: #ffffff;
  --color-neutral-10: #000000;
  --color-label: #565656;
  --color-primary: #6071ed;
  --radius-xs: 4px;
  --radius-s: 8px;
  --radius-base: 16px;
  --font-xs: 12px;
}

body {
  font-family: Arial, sans-serif;
  background: var(--color-neutral-0);
  margin: var(--space-none);
  padding: var(--space-none);
  background-color: var(--color-body);
}

header{
    background-color: var(--color-neutral-0);
    padding: var(--space-base);
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: var(--space-m);
    min-height: 45px;
}
/* Grid container */
.grid, .theme-container {
  max-width: 1300px;
  margin: auto;
}

/* 4 columns */
.grid-sizer,
.grid-item {
  width: 23.5%;
}

/* Gap */
.gutter-sizer {
  width: 2%;
}

/* Card */
.grid-item {
  margin-bottom: 20px;
  overflow: hidden;
}


/* Tablet */
@media (max-width: 992px) {
  .grid-sizer,
  .grid-item { width: 32%; }

  .gutter-sizer { width: 2%; }
}

/* Mobile */
@media (max-width: 576px) {
  .grid-sizer,
  .grid-item { width: 100%; }

  .gutter-sizer { width: 0%; }
}


article{
  background-color: var(--color-neutral-0);
  border-radius: var(--radius-xs);
  margin-bottom: var(--space-m);
  display: block;
}
.article-image img{
  border-radius: var(--space-xs) var(--space-xs) var(--space-none) var(--space-none);
  width: 100%;
}
.article-description{
  padding: var(--space-base);
}
.tag{
  background-color: var(--color-primary);
  font-size: var(--font-xs);
  color: var(--color-neutral-0);
  padding: var(--space-s) var(--space-base);
  border-radius: var(--radius-xs);
  font-weight:500
}
.time{
  font-size: var(--font-xs);
  font-weight: 600;
  color: var(--color-label);
}
.discription{
  background-color: var(--color-neutral-0);
  border-radius: var(--radius-base);
  padding: var(--space-base);
  margin-top: var(--space-m);
}

.display-flex{
 display: flex;
} 
.justify-content-space-between{
 justify-content: space-between;
}

.align-items-center{
  align-items: center;
}