/**
 * Bilde + tekst side om side (enkeltinnlegg, forsida, arkiv).
 * HTML-wrapper + inline grid fra inc/content-float-layout.php.
 */

#main .pen_content .pen-float-layout {
  display: grid !important;
  align-items: start !important;
  gap: 1.5em !important;
  margin-bottom: 1em;
  width: 100% !important;
}

#main .pen_content .pen-float-layout--left {
  grid-template-columns: minmax(0, max-content) minmax(0, 1fr) !important;
}

#main .pen_content .pen-float-layout--right {
  grid-template-columns: minmax(0, 1fr) minmax(0, max-content) !important;
}

#main .pen_content .pen-float-layout--left .pen-float-media {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

#main .pen_content .pen-float-layout--left .pen-float-body {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

#main .pen_content .pen-float-layout--right .pen-float-media {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

#main .pen_content .pen-float-layout--right .pen-float-body {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

#main .pen_content .pen-float-media {
  max-width: 300px;
}

#main .pen_content .pen-float-media figure,
#main .pen_content .pen-float-media .wp-caption {
  float: none !important;
  clear: none !important;
  margin: 0 !important;
  width: auto !important;
  max-width: 100% !important;
}

#main .pen_content .pen-float-media p {
  margin: 0 0 0.5em !important;
}

#main .pen_content .pen-float-media p:last-child {
  margin-bottom: 0 !important;
}

#main .pen_content .pen-float-media img {
  display: block !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
}

#main .pen_content .pen-float-body {
  min-width: 0 !important;
}

#main .pen_content .pen-float-body > :first-child {
  margin-top: 0 !important;
}

@media (max-width: 599px) {
  #main .pen_content .pen-float-layout,
  #main .pen_content .pen-float-layout--left,
  #main .pen_content .pen-float-layout--right {
    grid-template-columns: 1fr !important;
  }

  #main .pen_content .pen-float-media,
  #main .pen_content .pen-float-body {
    grid-column: 1 !important;
    grid-row: auto !important;
    max-width: none !important;
  }
}
