.pageContainer { display: flex; flex-direction: column; --selection-border: 3px; } .itemDetails { display: flex; flex-direction: row; min-height: 400px; background: rgb(33, 32, 34); color: white; justify-content: center; align-items: center; } .imageContainer { display: flex; flex-direction: column; align-items: center; } .card { max-height: 250px; min-height: 0px; background: rgb(236, 172, 255); box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); padding: 5px; } .card img { max-height: 250px; max-width: 200px; object-fit: cover; } .imageSelector img { margin-top: 15px; margin-left: 15px; display: inline-block; height: 50px; object-fit: cover; overflow: hidden; position: relative; } .imageSelector img:first-child:not(.selectedImage) { margin-left: var(--selection-border); } .imageSelector img.selectedImage { border: solid var(--selection-border) rgb(223, 118, 255); margin-top: calc(15px - var(--selection-border)); margin-left: calc(15px - var(--selection-border)); } .imageSelector img.selectedImage + img { margin-left: calc(15px - var(--selection-border)); } .imageSelector img.selectedImage:first-child { margin-left: 0; } .imageSelector img:not(.selectedImage) { margin-bottom: var(--selection-border); cursor: pointer; } .controls { flex: 1; max-width: 500px; margin-left: 40px; } .controls > h2:first-child { margin-top: 0; margin-bottom: 10px; } .notes { display: flex; flex-direction: row; justify-content: space-between; } .moreDetails { flex: 1; max-width: 800px; margin: 0 auto; width: calc(100vw - 100px); } .moreDetails h2 { text-align: center; } .form > div { margin-left: 0; width: 100%; } .imageCarousel { margin-top: 8px; display: flex; align-items: stretch; } .imageCarousel button { background: none; border: none; cursor: pointer; } .imageCarousel button:hover { background: rgba(0,0,0,0.12); } .fullImage { max-width: 100%; } .fullImage img { width: 100%; height: auto; }