.small-grid{background-color:#f5f5f5;display:block;padding:1.8rem 0 1.2rem;position:relative}.small-grid.bg-white{background-color:#fff;padding-bottom:0}.small-grid .title{font-family:var(--ff-display);margin:0 auto;max-width:6.7rem;text-align:center}.small-grid .subtitle{color:#3c3c3c;margin:.3rem auto 0;max-width:5.63rem;text-align:center}.small-grid .grid{display:grid;gap:.2rem;grid-template-columns:repeat(3,1fr);margin-top:1.2rem}.small-grid .card{align-items:center;aspect-ratio:1;background-color:var(--bg);border-radius:.4rem;display:flex;justify-content:center;overflow:hidden;position:relative}:is(.small-grid .card) .media-frame{transform:scale(1);transition:transform var(--dur) var(--ease)}:is(:is(.small-grid .card) .media-frame) .media{border-radius:.32rem}:is(.small-grid .card) .cnt{pointer-events:none;position:relative;text-align:center;transition:transform var(--dur) var(--ease);width:3rem;z-index:1}:is(.small-grid .card) .category{color:#fff;font-family:var(--ff-display)}:is(.small-grid .card) .text{color:#fff;font-family:var(--ff-sans);font-size:.18rem;font-weight:400;left:50%;line-height:1.2;opacity:0;position:absolute;top:calc(100% + .2rem);transform:translate(-50%);transition:opacity var(--dur) var(--ease);width:100%}@media (hover:hover){:is(.small-grid .card):hover .media-frame{transform:scale(.8)}:is(.small-grid .card):hover .cnt{transform:translateY(-.2rem)}:is(.small-grid .card):hover .text{opacity:1}}.small-grid .bottom{color:#000;margin:1.2rem auto auto;max-width:4.4rem;text-align:center}:is(.small-grid .bottom) .subtitle{font-family:var(--ff-display);margin-bottom:.2rem}:is(.small-grid .bottom) .text{color:#3c3c3c;font-family:var(--ff-sans);font-size:.18rem;font-weight:400;line-height:1.2}@media (max-width:768px) and (orientation:portrait){.small-grid{padding:1rem 0 .6rem}.small-grid .title{margin:auto}.small-grid .subtitle{width:100%}:is(.small-grid .subtitle) br{display:none}.small-grid .grid{gap:.2rem;grid-template-columns:repeat(1,1fr);margin-top:.6rem}.small-grid .card{aspect-ratio:1/1;border-radius:.2rem;width:100%}:is(.small-grid .card) .cnt{max-width:2.25rem;width:100%}:is(:is(.small-grid .card) .cnt) .category{font-size:.26rem}.in-view:is(.small-grid .card) .media-frame{transform:scale(.8)}.in-view:is(.small-grid .card) .cnt{transform:translateY(-.2rem)}.in-view:is(.small-grid .card) .text{opacity:1}.small-grid .bottom{margin-top:.6rem;max-width:3rem}:is(.small-grid .bottom) .text{font-size:.16rem}}