.image-title-text-button {
    margin-top: 0.9rem;
    margin-bottom: 0.3rem;
}

.image-title-text-button .flex-container {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        gap: 0.15rem;
    }

.image-title-text-button .image-wrap {
        width: 8.29rem;
        min-height: 5.74rem;
        position: relative;
        overflow: hidden;
        mask-image: url("../../assets/image-mask.svg");
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: cover;
        mask-size: cover;
        flex-grow: 1;
    }

:is(.image-title-text-button .image-wrap) img {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

:is(.image-title-text-button .image-wrap):hover .description {
                opacity: 1;
            }

:is(.image-title-text-button .image-wrap) .description {
            position: absolute;
            left: 0.2rem;
            bottom: 0.2rem;
            max-width: 3.6rem;
            padding: 0.04rem 0.08rem;
            padding-top: 0.06rem;
            background-color: var(--color-black);
            color: var(--color-white);
            border-radius: 0.06rem;
            overflow: hidden;
            opacity: 0;
            transition: opacity 0.4s var(--ease);
        }

.image-title-text-button .content-card {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 0.8rem;
        background-color: var(--color-2);
        min-height: 5.74rem;
        overflow: hidden;
        border-radius: 0.2rem;
        width: 5.1rem;
        padding: 0.3rem;
    }

:is(.image-title-text-button .content-card) .title-text-wrap {
            display: flex;
            flex-direction: column;
            gap: 0.2rem;
        }

:is(:is(.image-title-text-button .content-card) .title-text-wrap) .title,:is(:is(.image-title-text-button .content-card) .title-text-wrap) .text {
                width: 100%;
            }

:is(.image-title-text-button .content-card) .button-wrap {
            width: 100%;
        }

:is(:is(.image-title-text-button .content-card) .button-wrap) .main-button {
                width: 100%;
            }

.image-title-text-button .content-card.narrow {
        width: 1.2rem;
    }

@media screen and (max-width: 768px) {

    .image-title-text-button {
        margin-top: 0.8rem;
}

        .image-title-text-button .flex-container {
            flex-direction: column;
        }

        .image-title-text-button .image-wrap {
            width: 3.45rem;
            height: 5.11rem;
            min-height: unset;
            mask-image: url("../../assets/shape-down.svg");
        }

            :is(.image-title-text-button .image-wrap) .description {
                position: absolute;
                left: 0;
                bottom: 0.7rem;
                transform: unset;
                max-width: 100%;
                /* width: 2.95rem; */
                margin: 0 0.1rem;
                opacity: 1;
            }

        .image-title-text-button .content-card {
            gap: 0.6rem;
            min-height: unset;
            border-radius: 0.1rem;
            width: 100%;
            padding: 0.15rem;
        }

            :is(.image-title-text-button .content-card) .title-text-wrap {
                gap: 0.15rem;
            }

        .image-title-text-button .content-card.narrow {
            width: 100%;
            height: 1.2rem;
        }
    }