@media screen and (min-width: 768px) {
    .box {
        .f1 {
            width: 100%;
            height: 350px;

            img {
                width: 100%;
                height: 100%;
            }
        }

        .f2 {
            padding: 30px;

            .f2-i {
                 padding: 15px;
                box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.06);
                width: calc(33.3333% - 20px);
                flex-shrink: 0;

                .f2-i-tab {
                    display: flex;
                    align-items: center;
                    flex-wrap: wrap;
                    gap: 10px;

                    .f2-i-tab-i {
                        background-color: #7545E8;
                        border-radius: 4px;
                        color: #fff;
                        font-size: 14px;
                        padding: 0px 10px;
                    }
                }
            }
        }


    }
}

@media screen and (max-width: 768px) {
    .box {
        .f1 {
            width: 100%;
            height: 200px;

            img {
                width: 100%;
                height: 200px;
            }
        }

        .f2 {
            padding: 30px;

            .f2-i {
                width: 100%;
                flex-shrink: 0;
padding: 15px;
                box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.06);
                .f2-i-tab {
                    display: flex;
                    align-items: center;
                    flex-wrap: wrap;
                    gap: 10px;

                    .f2-i-tab-i {
                        background-color: #7545E8;
                        border-radius: 4px;
                        color: #fff;
                        font-size: 14px;
                        padding: 0px 10px;
                    }
                }
            }
        }


    }
}