html,
 body {
     height: 100%;
     width: 100%;
     margin: 0;
     padding: 0;
     /* background-color: #f0ece8; */
     /* background-color: #f9f9f9; */
     background-color: #f4f4f4;
     font-family: serif;
 }

 .main-visual {
     width: 100%;
     height: 100svh;
     padding: 24px;
     box-sizing: border-box;
 }

 .main-visual img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
     filter: brightness(0.8);
 }

  .main-visual span {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 1;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     color: #fff;
     text-shadow: 0 2px 8px #000;
     font-size: 4em;
 }

 .cardlayout {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 24px;
     padding: 24px;
     box-sizing: border-box;
 }