/* Home works section extracted from style.css */

/* ===== Works セクション（本番寄せ） ===== */
@media (width >= 769px) {
  /*
   * Production observed behavior:
   * - left column has inline flex-basis: 50%
   * - columns are flex with large gap (~154px)
   * - right logo column becomes narrower by remaining width
   */
  #works {
    overflow: visible;
  }

  #works > .wp-block-columns.l-container--wide {
    align-items: stretch;
    column-gap: clamp(120px, 10vw, 154px);
    overflow: visible;
  }

  #works > .wp-block-columns.l-container--wide > .wp-block-column:first-child {
    flex: 0 1 50%;
  }

  #works > .wp-block-columns.l-container--wide > .wp-block-column:last-child {
    flex: 1 1 0;
    display: flex;
    align-items: flex-end;
    overflow: visible;
  }

  #works .works-right-img {
    --works-right-img-width: min(100%, 300px);
    width: var(--works-right-img-width);
    max-width: 300px;
    margin-top: calc(265px - var(--works-right-img-width));
    margin-bottom: 0;
    margin-left: auto;
  }

  #works .works-right-img img {
    display: block;
    width: 100%;
    height: auto;
  }
}

@media (width <= 768px) {
  #works .works-right-img {
    width: 40vw;
    max-width: 40vw;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
  }

  #works .works-right-img img {
    width: 100%;
    height: auto;
  }
}