diff --git a/src/app/_samples/mediaco/components/gallery-grid/gallery-grid-component.scss b/src/app/_samples/mediaco/components/gallery-grid/gallery-grid-component.scss index 2791e69c..b05f8aba 100644 --- a/src/app/_samples/mediaco/components/gallery-grid/gallery-grid-component.scss +++ b/src/app/_samples/mediaco/components/gallery-grid/gallery-grid-component.scss @@ -34,25 +34,20 @@ .grid-container { flex: 1; display: grid; - grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); + grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 20px; padding: 24px; overflow-y: auto; + max-height: calc(100% - 150px); } .grid-item { position: relative; - display: flex; flex-direction: column; border: 1px solid #e0e0e0; border-radius: 1.5rem; - overflow: hidden; - background: white; - box-shadow: - 0px 1px 2px 0px #0000004d, - 0px 2px 6px 2px #00000026; transition: transform 0.2s; - height: 240px; + aspect-ratio: 4 / 3; &:hover { transform: translateY(-4px); @@ -64,6 +59,7 @@ height: 100%; object-fit: cover; display: block; + border-radius: 1.5rem; } p {