/*
||------------------------THEME-------------------------||
||                                                      ||
||     path: /css-styles/themes/article_overview.css    ||
||                                                      ||
||----------------------css-style-----------------------||

content:
- ARTICLE
- MAIN
- BUTTON
- HEADLINE
- GRID
*/

/* ------------------ ARTICLE ------------------ */
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;
}

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

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

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

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

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

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

hr {
  border: 1px solid var(--color-accent);
}

/* ------------------ BUTTON ------------------ */
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);
}

button:hover {
  background-color: var(--color-accent);
}
/* ------------------ HEADLINE ------------------ */

.headline {
  position: relative;
  display: block;

  margin-top: 0px;
  margin-bottom: 24px;
  padding: 8px 0;

  background-color: var(--color-header-bootom);
}

.headline h2,
.headline p {
  color: var(--color-headline);
}

.headline div {
  position: relative;
  margin: 0 auto;
  width: 96%;
}

/* ------------------ 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;
  }
}