@charset "UTF-8";
@layer utility {
  /* =====================
    u-head
  ===================== */
  .u-head {
    font-size: 20px;
    margin-block-start: 0.5em;
    margin-block-end: 0.5em;
    @media only screen and (width <= 768px) {
      font-size: calc((100 / 390) * 18 * 1vw);
    }
    text-align: center;
  }

  /* =====================
    u-gallery
  ===================== */
  .u-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

    & figure {
      position: relative;
      overflow: clip;

      & figcaption {
        position: absolute;
        bottom: 0;
        left: 0;
        inline-size: 100%;
        padding: 0.5rem;
        background-color: rgba(0, 0, 0, 0.5);
        color: #fff;
        font-size: 0.875rem;
        text-align: center;
      }
    }

    & img {
      inline-size: 100%;

      block-size: 100%;
      object-fit: cover;
    }
  }
}