.custom-carousel {
width: 100%;
margin: auto;
overflow: hidden;
position: relative; }
.custom-carousel-track-wrapper {
margin: var(--spacing-sm) 0;
overflow: hidden;
}
.custom-carousel-track {
display: flex;
width: 100%;
transition: transform 0.5s ease;
}
.custom-carousel-slide {
flex: 0 0 33.3333%;
height: 350px;
width: 100%;
background-size: cover;
background-position: center bottom;
background-repeat: no-repeat;
position: relative;
overflow: hidden;
user-select: none;
}
.carousel-caption {
position: absolute;
height: 80px;
bottom: 0;
left: 0;
width: 100%;
background: rgba(255, 255, 255, 0.8);
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
}
.carousel-caption h3 {
margin: 0;
font-size: var(--desktop-paragraph-size) !important;
color: #333;
text-align: center;
font-weight: 100;
}
.custom-carousel-slide img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center bottom;
display: block;
pointer-events: none;
user-select: none;
-webkit-user-drag: none;
user-drag: none;
}
.custom-carousel-slide h3 {
font-size: 1.1rem;
color: #333;
}
.custom-carousel-dots {
display: flex;
justify-content: center;
margin-top: 10px;
gap: 8px;
}
.custom-carousel-dots .dot {
width: 10px;
height: 10px;
background: #ccc;
border-radius: 50%;
cursor: pointer;
}
.custom-carousel-dots .dot.active {
background: #333;
}
.custom-carousel img {
user-drag: none;
-webkit-user-drag: none;
-moz-user-drag: none;
-ms-user-drag: none;
pointer-events: auto;
user-select: none;
}
.custom-carousel a {
-webkit-user-drag: none;
user-drag: none;
user-select: none;
} .carousel-controls {
display: flex;
justify-content: center;
align-items: center;
margin-top: 12px;
width: 30vw;
margin: auto;
}
.carousel-dots {
display: flex;
gap: 8px;
transform: translateY(-4px);
}
.carousel-arrow {
background-color: rgba(255, 255, 255, 0.8);
border: none;
font-size: 18px;
cursor: pointer;
padding: 10px 10px;
margin: 0 20px;
color: #333;
border-radius: 4px;
transition: background-color 0.3s;
}
@media (hover: hover) and (pointer: fine) {
.carousel-arrow:hover {
background-color: rgba(20, 71, 56, 0.8);
color: white;
}
}
.carousel-item.news {
overflow: hidden;
position: relative;
}
.carousel-item.news .carousel-image {
transition: transform 0.5s ease;
width: 100%;
height: 300px;
display: block;
}
.carousel-item.news:hover .carousel-image {
transform: scale(1.05);
}
.carousel-dots {
display: flex;
justify-content: center;
margin-top: 12px;
gap: 8px;
}
.carousel-dots .dot {
width: 10px;
height: 10px;
background-color: #bbb;
border-radius: 50%;
transition: background-color 0.3s ease;
cursor: pointer;
}
.carousel-dots .dot.active {
background-color: rgba(20, 71, 56, 0.8);
}
.carousel-container {
margin: auto;
position: relative;
z-index: 1;
display: flex;
justify-self: center;
align-self: center;
}
.carousel-container:before {
content: "";
position: absolute;
top: 0;
left: 50%;
right: 50%;
margin-left: -50vw; margin-right: -50vw; width: 100vw;
height: 100%;
z-index: -1;
}
.carousel-container h3 {
font-family: 'Zen Old Mincho';
font-size: min(calc(1.2 * 1440px / 100), 1.2vw);
font-weight: 400;
color: white;
padding-bottom: 0;
color: #3E131C;
}
.carousel-overflow {
overflow: hidden; }
.carousel-wrapper {
display: flex;
object-fit: cover;
flex-direction: row;
flex-wrap: nowrap;
}
.carousel-item {
flex: 0 0 calc((100%) / 3.5);
position: relative;
}
.discrete .carousel-item {
flex: 0 0 calc((100%) / 3);
position: relative;
}
.carousel-image {
width: 100%;
height: 280px;
object-fit: cover;
}
.carousel-title {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: rgba(255, 255, 255, 0.9);
padding: 5px;
text-align: center;
color: #3E131C;
}
.carousel-nav-btn {
position: absolute;
top: calc(0% + min(calc(10 * 1440px / 100), 15vw));
transform: translateY(-50%);
background: rgba(52, 113, 91, 0.87);
color: white;
border: none;
width: min(calc(3 * 1440px / 100), 3vw);
height: min(calc(3 * 1440px / 100), 3vw);
border-radius: 50%;
cursor: pointer;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.3s ease;
}
.carousel-nav-btn:hover {
background: rgb(37, 82, 66);
}
.carousel-nav-btn svg {
width: min(calc(1.5 * 1440px / 100), 1.5vw);
height: min(calc(1.5 * 1440px / 100), 1.5vw);
fill: none;
stroke: white;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.carousel-nav-btn.prev {
display: none !important;
left: 80px;
}
.carousel-nav-btn.next {
display: none !important;
right: 80px;
}
@media (min-width: 1921px) {
.carousel-item {
flex: 0 0 calc((100%) / 5);
}
}
@media (max-width: 1024px) {
.carousel-caption h3 {
font-size: var(--tablet-font-size) !important;
}
.custom-carousel-slide {
flex: 0 0 50%;
}
.carousel-item {
flex: 0 0 calc((100%) / 3);
}
} @media (max-width: 767px) {
.custom-carousel-slide {
flex: 0 0 100%;
}
.custom-carousel { padding-bottom: 10vw;
}
.carousel-caption h3 {
font-size: var(--mobile-font-size) !important;
}
.carousel-container {  }
.carousel-item {
flex: 0 0 calc((100% - 40px) / 2);
}
.discrete .carousel-item {
flex: 0 0 calc((100% - 40px) / 2);
}
.carousel-image {
height: 300px; }
.carousel-title h2 {
font-size: 16px; }
.carousel-nav-btn {
transform: translateY(50px);
width: 36px; height: 36px;
}
.carousel-nav-btn svg {
width: 16px; height: 16px;
}
.carousel-nav-btn.prev {
left: 10px;
}
.carousel-nav-btn.next {
right: 10px;
}
} @media (max-width: 480px) {
.carousel-container {  }
.carousel-caption {
padding-right: 20px;
}
.carousel-item {
flex: 0 0 100%; }
.discrete .carousel-item {
flex: 0 0 100%;
}
.carousel-image {
height: 250px; }
.carousel-nav-btn {
width: 30px; height: 30px;
}
.carousel-nav-btn svg {
width: 14px;
height: 14px;
}
.carousel-title h3 {
font-size: var(--mobile-font-size);
}
} @media (max-width: 1024px) and (min-width: 769px) {
.carousel-nav-btn.prev {
left: 55px;
}
.carousel-nav-btn.next {
right: 55px;
}
} @media (max-width: 768px) {
.carousel-nav-btn.prev {
left: 5px;
}
.carousel-nav-btn.next {
right: 5px;
}
}