.media{
    position: relative;
    height: 100%;
}

.media .media-thumbnail{
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-xl);
    object-fit: cover;
    overflow: hidden;
    height: 100%;
}

.media-thumbnail img{
    object-fit: cover;
    align-self: stretch;
    object-position: center;
}

.media:has(.media-player) .media-thumbnail:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-xl);
    transition: 0.1s ease;
}

.media:has(.media-player:hover) .media-thumbnail::after {
    background-color: rgba(0, 0, 0, 0.8);
}

.media .media-player{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: fit-content;
    height: 48px;
    border-radius: var(--radius-rounded);
    background-color: var(--surface-brand-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--action-primary);
    padding-top: var(--sp-lg);
    padding-bottom: var(--sp-lg);
    fill: var(--action-primary);
    transition: 0.1s ease;
}

.media .media-player:hover{
    background-color: var(--surface-brand);
    color: var(--base-white);
    fill: var(--base-white);
}

.media .media-player:hover .icon{
    color: var(--base-white);
    fill: var(--base-white);
}

.media-player .media-play-button{
    text-decoration: none;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    gap: var(--sp-sm);
    padding: var(--sp-lg);
}

.media-player:before{
    content: "";
    width: 100%;
    height: 100%;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
}

.media-player .media-play-button span{
    color: var(--action-primary);
}

.media-player:hover .media-play-button span{
    color: var(--base-white);
}

@media (max-width: 640px){
	.media-player .media-play-button{
		padding: var(--sp-sm);
	}
	
	.media .media-player{
		padding-top: var(--sp-sm);
		padding-bottom: var(--sp-sm);
	}
}