.card .elevated{
    box-shadow: var(--gears-sys-elevation-level1);
    border-radius: var(--gears-sys-shape-corner-medium);
    margin-left: 4px;
    margin-right: 4px;
}
.card .elevated:hover{
    box-shadow: var(--gears-sys-elevation-level2);
}
.card .elevated:focus{
    box-shadow: var(--gears-sys-elevation-level1);
}
.card .elevated:focus-visible{
    border: var(--gears-sys-state-focus-indicator);
}

.card .filled{
    box-shadow: var(--gears-sys-elevation-level0);
    border-radius: var(--gears-sys-shape-corner-medium);
    margin-left: 4px;
    margin-right: 4px;
}
.card .filled:hover{
    box-shadow: var(--gears-sys-elevation-level1);
}
.card .filled:focus{
    box-shadow: var(--gears-sys-elevation-level0);
}
.card .filled:focus-visible{
    border: var(--gears-sys-state-focus-indicator);
}


.card .outlined{
    box-shadow: var(--gears-sys-elevation-level0);
    border-radius: var(--gears-sys-shape-corner-medium);
    border: 1px solid var(--gears-outlinevariant-color);
    margin-left: 4px;
    margin-right: 4px;
}
.card .outlined:hover{
    box-shadow: var(--gears-sys-elevation-level1);
}
.card .outlined:focus{
    box-shadow: var(--gears-sys-elevation-level0);
}
.card .outlined:focus-visible{
    border: var(--gears-sys-state-focus-indicator);
}

.card .image{
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: var(--gears-sys-shape-corner-medium);
    width:100%;
    height:100%;
}

.card .expanded {
    transition: height 0.5s, width 0.5s, top 0.5s, left 0.5s, transform 0.25s, opacity 0.5s;
}
.card .expanded {
    opacity:1;
    position: absolute;
    width: 100%;
    height: 100vh;
    top:inherit;
    left:inherit;
    transform: scale(0);
    overflow: hidden;
}


.card.expanded{
    overflow: hidden;
}
.card.expanded .expanded {
    opacity:1;
    top:0;
    left:0;
    width: 100%;
    height: 100vh;
    z-index: 2;
    transform: scale(1);
    overflow-y: auto;
}

.card.expanded .expanded.image{
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}
.card.expanded .expanded{
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}

.card .scroll {
    display: block;
    opacity: 0;
    height:0px;
    overflow-y: auto;
    transition: opacity 0.25s;
}
.card.expanded div .card.scrolling .scroll, .card.scrolling .scroll {
    display: block;
    height:100%;
    opacity: 1;
    padding-top:16px;
    border-top: 2px solid var(--gears-outlinevariant-color);
}

@media only screen and (min-width: 600px) {
    .card.scrolling .scroll {
        max-height: 260px;
        overflow-y: auto;
    }
}