* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    display: flex;
    gap: 2rem;
    padding: 1rem;
}

.card {
    background: lightgray;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 5px 15px 0 lightgray;
}

.text {
    min-height: 1.6rem;
    width: 100%;
    border-radius: 2rem;
    background-color: lightgray;
}

.image {
    background-color: lightgray;
}

.action {
    /* width: 100%; */
    height: 100%;
    background-color: lightgray;
    border-radius: 4rem;
}

.w-25 {
    width: 25%;
}
.w-30 {
    width: 30%;
}
.w-50 {
    width: 50%;
}
.w-75 {
    width: 75%;
}
.w-90 {
    width: 90%;
}
.w-100 {
    width: 100%;
}

.top,
.middle,
.bottom {
    padding: 2rem;
    background-color: white;
}

.first {
    flex: 3;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;

    .top {
        flex: 5;
        display: flex;
        flex-direction: column;
        gap: 2rem;

        .image {
            flex: 5;
        }

        .desc {
            flex: 1;
            display: flex;
            gap: 2rem;

            .desc_titles {
                flex: 1;
                display: flex;
                flex-direction: column;
                gap: 1rem;
            }

            .action {
                flex: 1;
                height: 100%;
                border-radius: 4rem;
            }
        }
    }

    .middle {
        flex: 2;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
    }

    .bottom {
        flex: 1;
        padding: 2rem;

        div {
            width: 100%;
            height: 4rem;
            margin: auto 0;
            background-color: lightgray;
            border-radius: 4rem;
        }
    }
}

.second {
    flex: 2;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;

    .top {
        display: flex;
        gap: 1rem;

        .desc_titles {
            flex: 3;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            width: 100%;
        }

        .circle {
            flex: 1;
            height: 100%;
            aspect-ratio: 1/1;
            background-color: lightgray;
            border-radius: 50%;
        }
    }

    .bottom {
        flex: 1;

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

.third {
    flex: 3;
    display: flex;
    flex-direction: column;
    gap: 2rem;

    .top {
        flex: 3;
        display: flex;
        flex-direction: column;
        gap: 1rem;

        .head {
            flex: 1;
            border-radius: 4rem;
            background-color: lightgray;
        }

        .image {
            flex: 3;
        }
    }

    .bottom {
        flex: 2;
        display: flex;
        padding-right: 0;

        .image {
            height: 100%;
            aspect-ratio: 1/1;
        }

        .content {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 0.2rem;
            background-color: lightgray;

            .wrapper {
                padding: 2rem;
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                background-color: white;

                &:first-child {
                    flex: 2;
                }
            }
        }
    }
}