.case {
  --casecolor-gray50: rgba(108, 117, 125, 0.5);
  --casecolor-gray25: rgba(108, 117, 125, 0.25);
  --casecolor-gray15: rgba(108, 117, 125, 0.15);
  --caselistspace: 40px;
  max-width: 1200px;
  margin-right: auto;
  margin-left: auto;
  text-align: left;
  a {
    color: #232323 !important;
    &:hover {
      opacity: 0.8;
    }
  }
  .caselist {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--caselistspace);
    @media (max-width: 767px) {
      grid-template-columns: repeat(1, 1fr);
    }
    > .caseitem {
      > a {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        border: unset;
        border-radius: 4px;
        @media (max-width: 767px) {
          flex-direction: column;
          gap: 4px;
        }
        &:hover {
          background-color: #f8f8f8;
        }
        > .caseimg {
          aspect-ratio: 16/9;
          border-radius: 4px;
          object-fit: cover;
        }
        > .casedate {
          display: none;
          flex-shrink: 0;
          width: 9em;
          font-size: 0.8em;
          @media (max-width: 767px) {
            align-self: flex-start;
          }
        }
        > .casename {
          padding-inline: 8px;
          background-color: #f8f8f8;
          border: 1px solid #ddd;
          border-radius: 4px;
          font-size: 0.7rem;
          font-weight: 600;
        }
        > .casetitle {
          font-size: 1.18em;
          text-align: left;
          @media (max-width: 767px) {
            font-size: 1em;
          }
        }
      }
    }
  }
}