.blade-arc > div {
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
}

.blade-arc .blade-arc-text {
  flex: 1;
}

.blade-arc .blade-arc-text h1 {
  font-family: var(--article-heading-family);
}

.blade-arc .blade-arc-text > h2 {
  font-family: var(--article-heading-family);
}

/* author variant */
.blade-arc.author > div {
  border-bottom: 1px solid var(--clr-red);
}

.blade-arc.author h4 {
  font-size: var(--heading-font-size-ll);
}

.blade-arc.author p {
  font-size: var(--body-font-size-ms);
}

.blade-arc.author img {
  border-radius: 50%;
  width: 100px;
  height: 100px;
}

/* ranking variant */
.blade-arc.ranking > div {
  flex-direction: column-reverse;
  border-bottom: 1px solid var(--clr-grey);
}

.blade-arc.ranking h4 {
  font-weight: 700;
  font-size: var(--heading-font-size-xl);
}

.blade-arc.ranking a {
  color: var(--text-color);
}

.blade-arc.ranking p a {
  text-decoration: underline;
  text-decoration-color: var(--link-color);
}

.blade-arc.ranking picture {
  display: block;
  height: 140px;
  width: 140px;
}

@media (min-width: 576px) {  
  .blade-arc-wrapper div {
    padding: 10px; 
  }

  .blade-arc > div,
  .blade-arc.ranking > div {
    flex-direction: row;
    gap: 1rem;
  }

  .blade-arc-wrapper {
    /* background-color: #354970; */
    background-image: linear-gradient(-23deg, #7096e1, #354970, #7096e1);
    padding:1em;
  }
  
  .blade-arc-wrapper img {
    max-height: 400px; 
  }
  
  .blade-arc-wrapper h1 {
    font-size: 2em;
    color: #fae186; 
    text-shadow: 2px 2px black;
  }
  
  .blade-arc-wrapper h2 {
    font-size: 1.6em;
    color: white; 
    margin-top:0;
    text-shadow: 2px 2px black;
  }
  
  .blade-arc-wrapper h3 {
    font-size: 1.6em;
    color: white; 
    text-decoration: underline; 
    margin-top:0;
  }

  /* author variant */
  .blade-arc.author > div {
    gap: 3rem;
  }
}