@import "../../common/css/main.css";
html {
    overflow-x: hidden;
}
body {
    height: 100vh;
}
.CollectionHeader {
    background-size: cover;
    background-position: center;
    height: 40vh;
    & > div {
        & h2 {
            font-size: 6vw;
            font-family: var(--font-family), sans-serif;
        }
        & p {
            font-size: 2vw;
            font-family: var(--font-family), sans-serif;
        }
    }
    @media screen and (min-width: 768px) {
        height: 75vh;
        & > div {
            display: flex;
            align-items: center;
            & h2 {
                font-size: 4vw;
            }
            & p {
                font-size: 1.5vw;
                max-width: 65%;
            }
        }
    }
}
.card-holder {
    display: flex;
    justify-content: center;
}
.card-title {
    font-size: 1rem;
}
.card {
    text-decoration: none;
    transition: all 0.25s ease-in-out;
    & .image-container {
        & img {
            object-fit: contain;
            object-position: bottom center;
        }
        height: 20vh;
        width: 100%;
        border-bottom: 1px solid var(--tm-slate-300);
    }
    & .card-body {
        padding: 5px;
        display: flex;
        flex-direction: column;
        justify-content: end;
        & h4 {
            font-size: 2.5vw;
            font-family: var(--font-family), sans-serif;
        }
    }
    @media screen and (min-width: 786px) {
        & img {
            height: 200px;
        }
        & .card-body {
            padding: 15px;
            & h4 {
                font-size: 1.5vw;
            }
        }
    }
    &:hover {
        scale: 105%;
        box-shadow: rgba(100, 100, 111, 0.2) 0 7px 29px 0;
    }
}