.acd-container-bg {
background-color: #483359;
}
.acd-container {
display: flex;
justify-content: center;
align-items: center;
margin: 10vmin;
overflow: hidden;
transform: skew(5deg);
}
.acd-container .acd-card {
flex: 1;
transition: all 1s ease-in-out;
height: 75vmin;
position: relative;
}
.acd-container .acd-card .acd-card__head {
color: white;
background: #804393;
padding: 0.5em;
transform: rotate(-90deg);
transform-origin: 0% 0%;
transition: all 0.5s ease-in-out;
min-width: 100%;
text-align: center;
position: absolute;
bottom: 0;
left: 0;
font-size: 1em;
white-space: nowrap;
}
.acd-container .acd-card:hover {
flex-grow: 10;
}
.acd-container .acd-card:hover img {
filter: grayscale(0);
}
.acd-container .acd-card:hover .acd-card__head {
text-align: center;
top: calc(100% - 2em);
color: white;
background: rgba(0, 0, 0, 0.5);
font-size: 2em;
transform: rotate(0deg) skew(-5deg);
}
.acd-container .acd-card img {
width: 100%;
height: 100%;
object-fit: cover;
transition: all 1s ease-in-out;
filter: grayscale(100%);
}
.acd-container .acd-card:not(:nth-child(7)) {
margin-right: 1em;
}