.gallery {
width: 100%;
}
.gallery-container {
align-items: center;
display: flex;
height: 420px;
margin: 0 auto;
max-width: 1400px;
position: relative;
}
.gallery-item {
height: 15rem;
opacity: .4;
position: absolute;
transition: all 0.3s ease-in-out;
width: 12rem;
z-index: 0;
opacity: 0;
left: 50%;
transform: translateX(-50%);
}
.gallery-item.gallery-item-selected {
height: 42rem;
opacity: 1;
left: 50%;
transform: translateX(-50%);
width: 36rem;
z-index: 2;
}
.gallery-item.gallery-item-previous,
.gallery-item.gallery-item-next {
height: 26.5rem;
opacity: 1;
width: 20.5rem;
z-index: 1;
}
.gallery-item.gallery-item-previous {
opacity: 1;
left: 28%;
transform: translateX(-50%);
}
.gallery-item.gallery-item-next {
opacity: 1;
left: 72%;
transform: translateX(-50%);
}
.gallery-item.gallery-item-first {
opacity: 1;
left: 15%;
transform: translateX(-50%);
}
.gallery-item.gallery-item-last {
opacity: 1;
left: 85%;
transform: translateX(-50%);
} .gallery-controls button {
border: 0;
cursor: pointer;
font-size: 16px;
margin: 0 20px;
padding: 0 12px;
text-transform: capitalize;
}
.gallery-controls button:focus {
outline: none;
}
.gallery-controls-previous {
position: relative;
}
.gallery-controls-previous::before {
border: solid #000;
border-width: 0 2px 2px 0;
content: '';
display: inline-block;
height: 4px;
left: -10px;
padding: 2px;
position: absolute;
top: 0;
transform: rotate(135deg) translateY(-50%);
transition: left 0.15s ease-in-out;
width: 4px;
}
.gallery-controls-previous:hover::before {
left: -18px;
}
.gallery-controls-next {
position: relative;
}
.gallery-controls-next::before {
border: solid #000;
border-width: 0 2px 2px 0;
content: '';
display: inline-block;
height: 4px;
padding: 2px;
position: absolute;
right: -10px;
top: 50%;
transform: rotate(-45deg) translateY(-50%);
transition: right 0.15s ease-in-out;
width: 4px;
}
.gallery-controls-next:hover::before {
right: -18px;
}
.gallery-nav {
bottom: -15px;
display: flex;
justify-content: center;
list-style: none;
padding: 0;
position: absolute;
width: 100%;
}
.gallery-nav li {
background: #ccc;
border-radius: 50%;
height: 10px;
margin: 0 16px;
width: 10px;
}
.gallery-nav li.gallery-item-selected {
background: #555;
}