/* Content grid with image on left */
.social-content-image-left {
  display: grid;
  grid-template-columns: auto 1fr;
  margin-top: 3em;
  padding: 1em;
  color: black;
  transition:
    background-color 0.25s;
}

/* Targets all children elements with "social-content-image" class
that are a parent of any element with "social-content-image-left" */
.social-content-image-left .social-content-image {
  display: block;
  transition:
    transform 0.2s;
}

/* Targets all children elements with "social-content-image" class
that are a parent of any element with "social-content-image-left"
BUT ONLY WHEN THE PARENT ELEMENT IS HOVERED/FOCUSED */
.social-content-image-left:hover .social-content-image,
a:focus .social-content-image {
  animation: shake 0.5s;
}

/* Left content grid highlight when hovered/focused */
.social-content-image-left:hover,
a:focus .social-content-image-left {
  background: lightgray;
}

/* Social media description */
.social-content-flavor {
  display: grid;
  grid-template-rows: auto auto 1fr;
  margin-left: 2em;
}

/* Social media name/channel on specific platform */
.social-subname {
  margin-top: 0;
  font-size: 1em;
  font-weight: bold;
}

/* The main social icon for each social */
.social-content-image-left img.social-content-image {
  width: 6.25em;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {

  /* Socials text */
  .social-content-image-left {
    color: #E7E7E7;
  }

  /* Currently hovered/focused social background */
  .social-content-image-left:hover,
  a:focus .social-content-image-left {
    background-color: #204279;
  }
}

/* High contrast mode */
@media (forced-colors: active) {

  /* Makes social links visible */
  .social-content-image-left {
    border: 2px solid LinkText;
    transition: 
      border 0.1s;
  }

  /* Makes focus/hover on links noticeable */
  .social-content-image-left:hover, a:focus .social-content-image-left {
    border: 2px solid Highlight;
  }
}

/* Any screen less than or equal to 449 pixels in width */
@media screen and (max-width: 449px) {

  /* Converts the grid into 1 column */
  .social-content-image-left {
    grid-template-columns: auto;
    margin-top: 6em;
  }

  /* Removes some now defunct grid styling */
  .social-content-flavor {
    margin-left: 0;
  }

  /* Centers the socials*/
  .social-content-flavor h2,
  .social-subname,
  .social-content-image-left picture,
  .social-content-image-left img {
    width: fit-content;
    margin: 0 auto;
  }

  /* Allows word breaking */
  .social-subname {
    word-break: break-all;
  }
}