.movie{
    position: relative;
    width: 250px;
    margin: 0 5px 45px 0;
}

.poster img {
    border-radius: 7px;
    width: 250px;
    height: 375px;
    object-fit: cover;
    margin-bottom: 10px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4), 0px 7px 13px -3px rgba(0, 0, 0, 0.3), inset 0px -3px 0px rgba(0, 0, 0, 0.2);
    transition: all .4s;
}

.poster img:hover{
    opacity: .6;
}

.title {
    font-size: 13px;
    font-weight: bold;
}

.rating {
    position: absolute;
    font-size: 12px;
    font-weight: bold;
    top: 8px;
    right: 8px;
    border-radius: 5px;
    background-color: #000000BB;
    padding: 2px 4px;
}

@media screen and (max-width: 576px){
    .poster img {
        width: 342px;
        height: 513px;
    }
}


@keyframes growProgressBar {
    0%, 33% { --pgPercentage: 0; }
    100% { --pgPercentage: var(--value); }
}

@property --pgPercentage {
    syntax: '<number>';
    inherits: false;
    initial-value: 0;
}

div[role="progressbar"] {
    --size: 2rem;
    --fg: #369;
    --bg: #def;
    --pgPercentage: var(--value);
    animation: growProgressBar 3s 1 forwards;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    display: grid;
    place-items: center;
    background:
        radial-gradient(closest-side, white 80%, transparent 0 99.9%, white 0),
        conic-gradient(var(--fg) calc(var(--pgPercentage) * 1%), var(--bg) 0)
;
    font-family: Helvetica, Arial, sans-serif;
    font-size: calc(var(--size) / 5);
    color: var(--fg);
}