/* ELEMENTS */

/*img
{
  object-fit: contain;
  vertical-align: center;
} */

/* FLEXBOXES */
.articles
{
  display: block;
  justify-self: center;
  width: clamp(600px, 70vw, 55vw);
  margin-left: 5%;
  margin-right: 5%;
  margin-bottom: 75px;
}

@media (width <= 1023px) 
{
  .articles { width: clamp(200px, 90vw, 600px) }
}

/* ARTICLES 

.article
{
  justify-self: center;
  display: flex; 
  border: solid 2px;
  margin: 5px;
  width: 100%
}
*/

@media (width <= 600px) {
  .article 
  {
    display: block; 
  }
  .text
  {
    border-bottom: solid 2px;
    border-color: var(--text-color);
  }
}
@media (width >= 601px) {
  .article 
  {
    display: flex;
    border: solid 2px;
    border-color: var(--text-color);
  }
  .text
  {
    border-right: solid 2px;
    border-color: var(--text-color);
    margin: 5px;
    flex: 5;
  }
}

.article
{
  justify-self: center;
  border: solid 2px;
  border-color: var(--text-color);
  margin: 10px;
  width: 100%; 
  background-color: var(--alternate-background-color);
}

.articleImage
{

  margin: 5px;
  vertical-align: center;
  flex: 4;
  height: 100%;
}

/* TEXT */
.title
{
  margin: 0px;
  margin-right: 5px;
  margin-left: 5px;
  text-align: center;
  font-weight: var(--title-weight);
  text-transform: var(--title-capitalize);
  color: var(--alternate-text-color);
}

.link
{
  margin: 0px;
  margin-right: 5px;
  margin-left: 5px;
  text-align: center;
  color: var(--linkColor);
}


.articleImage img
{

  width: 100%;
  height: 100%;
  object-fit: contain;
  vertical-align: center;
}

.home-title
{
  margin: 0px;
  margin-right: 5px;
  margin-left: 5px;
  text-align: center;
  font-weight: var(--title-weight);
  text-transform: var(--title-capitalize);
  color: var(--alternate-text-color);
  font-size: 2em;
}


.home-text
{
  font-size: 1.5em;
  color: var(--text-color);
}