#rooms-list {
display: flex;
flex-direction: column;
gap: 120px;
margin: 0;
padding: 0;
}
.room-item {
display: grid;
grid-template-columns: 1fr;
gap: 80px;
align-items: flex-start;
}
@media screen and (min-width: 1024px) {
.room-item {
grid-template-columns: 1fr 1fr;
}
.room-item.reverse .room-image {
order: 2;
}
.room-item.reverse .room-details {
order: 1;
}
}
.room-image {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
overflow: hidden;
background: #f5f5f5;
}
.room-image .splide__slide > .image img,
.room-image .splide__slide > .image > img {
object-fit: cover;
width: 100%;
height: 100%;
}
.room-image.placeholder img {
object-fit: cover;
width: 100%;
height: 100%;
}
.room-image .splide__arrows {
position: absolute;
top: 50%;
left: 0;
width: 100%;
transform: translateY(-50%);
display: flex;
justify-content: space-between;
pointer-events: auto;
}
.room-image .splide__arrow {
background: rgba(0,0,0,0.5);
border: none;
width: 44px;
height: 44px;
border-radius: 50%;
font-size: 32px;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
.room-image .splide__arrow--next {
right: 20px;
}
.room-image .splide__arrow--prev {
left: 20px;
}
.room-image .splide__arrow:hover {
background-color: var(--kokoa-600);
}
.room-image .splide__pagination {
position: absolute;
width: 100%;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 3px;
}
.room-image .splide__pagination__page {
width: 15px !important;
height: 15px !important;
cursor: pointer;
background-color: rgba(0,0,0,0.25) !important;
}
.room-image .splide__pagination .splide__pagination__page.is-active {
background-color: var(--beju-600) !important;
}
.room-details {
display: flex;
flex-direction: column;
gap: 20px;
}
.room-content .room-headline {
font-size: 32px;
font-weight: var(--regular-weight);
color: var(--kurumi-600);
}
.room-content .room-title {
font-size: 24px;
font-weight: var(--bold-weight);
color: var(--kokoa-600);
margin-bottom: 10px;
}
.room-info {
display: flex;
justify-content: flex-start;
align-items: center;
}
.room-icons {
}
.room-icons ul {
margin: 30px 0 0 0;
padding: 0;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
align-items: center;
justify-content: center;
gap: 20px;
}
.room-icons ul li {
list-style: none;
padding-left: 20px;
border-left: 1px solid var(--beju-600);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 5px;
}
.room-icons ul li:first-child {
padding-left: 0;
border-left: none;
}
.room-icons ul li i {
font-size: 36px;
display: flex;
}
.number {
font-size: 24px;
font-weight: var(--bold-weight);
}
.price {
font-style: italic;
font-weight: var(--bold-weight);
color: var(--kurumi-600);
}
@media screen and (max-width: 1024px) {
.room-info {
display: block;
}
.room-info .separator {
display: none;
}
}
@media screen and (max-width: 768px) {
.room-icons ul {
grid-template-columns: 1fr;
gap: 0;
}
.room-icons ul li {
border: 0;
margin: 0 0 20px 0;
padding: 0;
}
}
.equipment-link {
max-width: 320px;
padding: .5em 1em;
border-radius: 25px;
background-color: #f8f8f8;
display: flex;
width: 100%;
height: 100%;
font-size: 16px;
font-weight: 400;
letter-spacing: 1px;
justify-content: center;
align-items: center;
}
.equipment-link:hover {
background-color: var(--beju-600);
color: var(--kokoa-600);
}
.equipment-icons {
margin: 0 auto;
padding: 0;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 0 60px;
}
.equipment-icons li {
list-style: none;
display: flex;
align-items: center;
justify-content: flex-start;
max-height: 48px;
opacity: 1;
margin: 20px 0;
padding: 0.5rem;
overflow: hidden;
transition: max-height 0.3s ease, opacity 0.3s ease, margin 0.3s ease, padding 0.3s ease;
}
.equipment-icons li:nth-child(n + 10) {
max-height: 0;
opacity: 0;
margin: 0;
padding: 0;
}
.equipment-icons.expanded li:nth-child(n + 10) {
max-height: 48px;
opacity: 1;
margin: 20px 0;
padding: 0.5rem;
}
.equipment-icons li i {
font-size: 48px;
margin-right: 20px;
}
@media screen and (max-width: 992px) {
.equipment-icons {
grid-template-columns: 1fr 1fr;
}
}
@media screen and (max-width: 768px) {
.equipment-icons {
grid-template-columns: 1fr;
}
}
.link-more {
margin-top: var(--space-l);
text-align: center;
}
.link-more a {
display: inline-block;
margin-top: 1rem;
color: var(--kokoa-600);
text-decoration: none;
text-transform: uppercase;
font-weight: var(--regular-weight);
letter-spacing: 1px;
cursor: pointer; }
.link-more a:hover {
text-decoration: none; }
.chevron-icon {
display: block;
margin: 0.5rem auto 0;
font-size: 1.5rem;
color: var(--kokoa-600);
transition: transform 0.3s ease;
}
.link-more:hover .chevron-icon {
transform: translateY(4px);
}
.equipment-icons.expanded + .link-more .chevron-icon, 
.collapse-content.expanded + .link-more .chevron-icon {
transform: rotate(180deg);
}
.equipment-icons.expanded + .link-more:hover .chevron-icon,
.collapse-content.expanded + .link-more:hover .chevron-icon {
transform: translateY(-4px) rotate(180deg);
}
.collapse-content {
overflow: hidden;
max-height: 0;
opacity: 0;
transition:
max-height 0.4s ease,
opacity     0.3s ease 0.1s;
}
.collapse-content.expanded {
max-height: 2000px; opacity: 1;
}