.hed,
.deck {
  text-align: center;
  margin: @s16 0;

  &.left {
    text-align: left;
  }

  @media (max-width: 960px) {
    text-align: left;
    padding: 0 @s16;
  }
}

h1 {
  font-size: 4rem;
  font-family: @hed;
}

//could the next three classes be moved into byline module?
.byline-wrapper {
  max-width: @lg;
  border-bottom: 1px solid @grey-25;
  margin: @s16 auto @s24;
  padding-bottom: @s8;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;

  @media (max-width: 960px) {
    margin: @s16 @s16 @s24;
  }

  @media (max-width: @md) {
    border-bottom: none;
    display: block;
  }
}

.byline-name {
  font-weight: 700;
}

.topper-dateline {
  color: @grey-50;
}

.byline {
  text-align: left;
  display: inline-block;

  a,
  a:visited {
    text-decoration: none;
    color: @black;

    &:hover {
      color: @brand;
    }
  }
}

.caption {
  margin: @s4 auto @s24;
}

// Handle basic embed classes
.inline-figure {

  &.float-left,
  &.float-right {
    max-width: @xl;
    margin: 0 auto;

    @media (max-width: @xl) {
      max-width: @md;
      padding: 0 @s16;
    }

    figure {
      max-width: @xs;
      width: 100%;

      @media (max-width: @xl) {
        max-width: @md;
        float: none;
        margin: @s24 auto;
      }
    }
  }

  &.float-left {
    figure {
      float: left;
      margin-right: @s16;
    }

  }

  &.float-right {
    figure {
      float: right;
      margin-left: @s16;
    }
  }

  &.full {
    max-width: 100%;
  }
}

.inline-figure.wide,
.inline-figure.full,
.inline-figure.large {
  &.graphic-wrapper {
    @media @max-desktop {
      padding: 0 @s16;
    }
  }

  .caption {
    max-width: @w-text-width;

    @media @max-text-width {
      padding: 0 @s16;
    }
  }
}

//side-by-side photos
.side-by-side-wrapper {
  @media (max-width: 1200px) {
    padding-left: @s16;
    padding-right: @s16;
  }
}

.side-by-side {
  max-width: 592px;
  width: 100%;
  display: inline-block;
  vertical-align: top;

  @media (max-width: 1200px) {
    width: calc(50% - 4px);
    // max-width: 640px;
  }

  @media @tablet {
    width: 100%;
    max-width: 640px;
  }
}

.side-by-side-left {
  margin-right: @s4;

  @media @tablet {
    margin-bottom: @s8;
  }
}

.side-by-side-right {
  margin-left: @s4;
}

.side-by-side-left,
.side-by-side-right {
  @media @tablet {
    margin-right: auto;
    margin-left: auto;
    display: block;
  }
}

.side-by-side-caption-wrapper {
  margin-bottom: @s24;
  margin-top: @s4;
  line-height: 1.3;

  .caption {
    margin-bottom: 0;
    margin-top: 0;
    display: inline;
    padding: 0 !important;
  }

  @media @max-text-width {
    padding: 0;
  }
}

.side-by-side-caption-left {
  &::before {
    content: "LEFT: ";
    font-family: @sans;
    font-size: @s14;
    font-weight: 700;
    color: @grey-75;
  }

  @media @tablet {
    &::before {
      content: "TOP: ";
      font-family: @sans;
      font-size: @s14;
      font-weight: 700;
      color: @grey-75;
    }
  }
}

.side-by-side-caption-right {
  &::before {
    content: " RIGHT: ";
    font-family: @sans;
    font-size: @s14;
    font-weight: 700;
    color: @grey-75;
  }

  @media @tablet {
    &::before {
      content: " BOTTOM: ";
      font-family: @sans;
      font-size: @s14;
      font-weight: 700;
      color: @grey-75;
    }
  }
}

//custom graphic
.graphic-wrapper {

  &.inline-figure.wide,
  &.inline-figure.full,
  &.inline-figure.large {
    .caption {
      max-width: 100%;

      @media @max-text-width {
        padding: 0;
      }
    }
  }
}

.inline-figure.wide {
  caption {
    @media (max-width: @xl) {
      padding: 0 @s16;
    }
  }
}


.topper-image {
  .caption {
    max-width: @lg;
    margin-bottom: @s8;

    @media (max-width: 960px) {
      padding: 0 @s16;
    }
  }
}

a {
  color: @black;
  text-decoration: underline;
  text-decoration-color: @brand;
  text-decoration-skip-ink: auto;
  outline: 0 !important;

  &:hover {
    color: @brand;
  }

  &:visited {
    color: @grey-75;
  }
}

.og-pub-date {
  color: @grey-75;
}

.devhub-credit {
  a {
    text-decoration-color: @grey-75;
  }

  svg {
    height: 0.75rem;
    margin-left: @s4;
  }
}

//formatting for bulleted lists
ul {
  padding-left: 2.2rem;
  &:extend(.text-width);
}

body ul {
  margin-bottom: @s24;
}