@use 'sass:color';
@import "../../scss/color-sign";
@import "../../scss/color";
@import "../../scss/media";
@import "../../scss/style";

.elements-encyclopedia-page { 
    font-size: 16PX;
    background: color.adjust($color: $light-background, $lightness: -5%, $alpha: 1.0);

    .content {
        padding: 1em;
        display: grid;
        grid: auto-flow / 1fr;
        grid-gap: 1.5em;
        max-width: 800PX;
        margin-left: auto;
        margin-right: auto;
        
        @include landscape{
            padding: 1em 1.5em;
            grid: auto-flow / 1fr 1fr;
        };

        @include classification-light;
    }

    .card-item {
        border-radius: 6PX;
        overflow: hidden;
        width: 100%;
        max-width: 380PX;
        background: $light-background;
        justify-self: center;
    }
    .image-wrapper {
        position: relative;
        width: 100%;
        padding-bottom: 44.5%;
        background-color: var(--color);

        .image {
            position: absolute;
            width: 100%;
            height: 100%;
        }
    }

    .text-wrapper {
        padding: 0 1em 1em;
    }
    .card-title {
        font-size: 1.2em;
        line-height: 2;
    }
    .card-summary {
        font-size: 14PX;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}


// theme
.elements-encyclopedia-page {
    &.light {

    }
    &.dark {
        background: color.adjust($color: $dark-background, $lightness: -5%, $alpha: 1.0);

        .content {
            @include classification-dark;
        }

        .card-item {
            background: $dark-background;
            color: color.adjust($color: $dark-foceground, $alpha: -0.2);
        }
    }
}