@import '/css/list-common.css' all;

.dvd-detail {
    display: grid;
    grid-template-columns: 280pt auto;
    grid-template-rows: 80pt auto;
    grid-gap: 5pt;
    padding: 5pt;
    height: 730px;
}
.dvd-detail-img {
    grid-column: 1;
    grid-row: 1/-1;
    position: relative;
}
.dvd-detail-img span {
    position: absolute;
    bottom: 5pt;
    right: 5pt;
    background-color: rgba(200,200,200,0.8);
    padding: 3pt;
}

.dvd-detail-info {
    grid-column: 2/-1;
    grid-row: 1;
    display: flex;
    flex-wrap: wrap;
}

.dvd-container {
    padding: 3pt;
    flex-wrap: nowrap;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    grid-auto-rows: 110pt;
}

.dvd-container > li {
    flex: 0 0 70pt;
}
.dvd-container a {
    color: #EEEEEE;
    background-color: #4584cc;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    font-size: 80%;
    text-decoration: none;
}
.dvd-container a:hover {
    color: #FFFFFF;
}
.dvd-container img {
    padding: 2pt;
    width: 100%;
    height: 80pt;
    object-fit: cover;
}
.dvd-container span {
    padding: 2pt 3pt;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}