/*
||------------------------THEME-------------------------||
||                                                      ||
||     path: /css-styles/themes/article_overview.css    ||
||                                                      ||
||----------------------css-style-----------------------||
*/
/*
content:
- ARTICLE
- MAIN
- BUTTONS
- ACCENT
- GRID
*/

/* ------------------ ARTICLE ------------------ */
.grid article {
  max-width: 500px;
  padding: 20px;
  margin: 0 auto;

  border-radius: 14px;
  background: var(--color-surface);
  box-shadow: var(--shadow-medium);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.grid article:hover {
  box-shadow: var(--shadow-soft);
  transform: translateY(-1px);
}

.grid img {
  position: relative;
  width: 80%;
  height: 380px;
  left: 10%;
  margin-bottom: 12px;

  box-shadow: var(--shadow-medium);
  border-radius: 12px;
  object-fit: cover;
}

.grid .text,
.grid h2,
.grid h3,
.grid p,
.grid a,
.grid li {
  color: var(--color-text);
  text-decoration: none;
}

/* ------------------ MAIN ------------------ */
main {
  position: relative;
  display: block;
}

body {
  background-color: var(--color-background);
}

/* ------------------ BUTTONS ------------------ */
.grid button {
  padding: 4px 10px;
  margin: 8px;

  border: 0.5 solid #222;
  border-radius: 8px;
  text-shadow: var(--shadow-medium);
  background-color: var(--color-accent-dark);
  color: var(--color-text);
}

.grid button:hover {
  background-color: var(--color-accent);
}

.grid a:hover {
  color: #cfcfcf;
}

/* ------------------ ACCENT ------------------ */
.grid hr {
  border: 1px solid var(--color-accent);
}

/* ------------------ GRID ------------------ */
.grid {
  position: relative;
  display: grid;
  width: 96%;
  gap: 24px;

  grid-template-columns: 1fr;
  margin: 0 auto;
}

@media (min-width: 1024px) {
  .grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 1360px) {
  .grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}