﻿.user-controls__others__configurator__configurator-type-card {
    width: 405px;
    height: 380px;
    border-radius: 20px;
    background: #dcdcdc;

    & > .header {
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 20px 20px 0 0;
        background: #121212;
        height: 39px;

        & > p {
            color: var(--blanc);
            font-family: Outfit;
            font-weight: 600;
            text-transform: uppercase;

            @media screen and (max-width: 1280px) {
                font-size: 13px;
            }
        }

        @media screen and (max-width: 1280px) {
            height: 30px;
        }
    }

    & > .content {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        height: 340px;

        & > .image {
            width: 257px;
            height: 257px;
            aspect-ratio: 1 / 1;

            @media screen and (max-width: 1280px) {
                width: 136px;
                height: 136px;
            }
        }

        & > .actions {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 0 10px;
            gap: 5px;
            width: 100%;

            & > .button {
                height: 40px;
                display: flex;
                padding: 10px 33px;
                border-radius: 20px;
                font-family: Outfit;
                font-size: 16px;
                font-weight: 600;
                text-transform: uppercase;
                justify-content: center;
                align-items: center;
                cursor: pointer;

                &.simplified {
                    background: var(--blanc);
                    color: var(--noir);
                }

                &.advanced {
                    background: #2A2929;
                    color: var(--blanc);
                }

                @media screen and (max-width: 1280px) {
                    height: 30px;
                    font-size: 12px;
                }
            }
        }

        @media screen and (max-width: 1280px) {
            height: 195px;
        }
    }

    @media screen and (max-width: 1280px) {
        width: 370px;
        height: 224px;
    }
}
