@charset "utf-8";

:root { --gap: 1em; --row-count: 4; --image-width: 270px; --image-grid-width: calc(var(--image-width) - var(--gap)*0.5); --image-height: calc(var(--image-width) * 0.628); --image-grid-height: calc(var(--image-height) + var(--gap)*2 + 1em); }

.container-fluid { max-width: 1140px; }

#image-grid {
  display: grid; grid-auto-flow: column; grid-template-rows: repeat(var(--row-count), calc(var(--image-grid-height))); grid-auto-columns: var(--image-grid-width); gap: calc(var(--gap) - 1em) var(--gap); overflow-x: auto; scroll-snap-type: x mandatory;
  &::-webkit-scrollbar { display: none; }
  scrollbar-width: none;
}

.image-container { width: 100%; display: flex; justify-content: center; align-items: center; scroll-snap-align: start; flex-direction: column; cursor: pointer; }

.image-container img { width: calc(100% - 8px); height: auto; }

.image-container p { width: 100%; line-height: 1.8; }

.dots { text-align: center; }

.dot { height: 10px; width: 10px; background-color: rgb(187, 187, 187); border-radius: 50%; display: inline-block; transition: background-color 0.3s; margin: 0px 0.25em; }

.dot.active { background-color: rgb(68, 68, 68); }

.btn.amount-button { font-size: 1.25em; border-width: 2px; font-weight: 600; transition: none !important; box-shadow: none !important; }

.arrow-btn { position: absolute; top: 50%; transform: translateY(-50%); display: block; color: rgb(51, 51, 51); background: white; border: 1.5px solid rgb(113, 121, 124); width: 1.75em; height: 1.75em; border-radius: 999px; font-size: 2em; cursor: pointer; z-index: 10; }

.arrow-btn:hover { background: rgb(113, 121, 124); color: white; }

.left-arrow { left: 0px; }

.right-arrow { right: 0px; }

.selected-image { border: 2px solid white; outline: black solid 4px; border-radius: 12.5px; }

.amount-button-active { background: black; border-color: black; color: white !important; box-shadow: none !important; }

.amount-button-active:hover { background: black; border-color: black; color: white !important; }