#hero {
    .container {
        display:        flex;
        flex-direction: column;
        align-items:    center;
        gap:            30px;

        padding-bottom: 50px;
        border-bottom:  1px solid #F1F0EF;

        .hero {
            padding: 162px 236px 0;

            & p {
                max-width: 585px;
                margin:    0 auto;
            }
        }

        .hero-actions {
            display: flex;
            gap:     8px;

            .active {
                background: #E4E1FF;

                &:after {
                    border:  1px solid #7061EF;
                }
            }
        }

        .category-dropdown {
            width:       100%;
            position:    relative;
            cursor:      pointer;

            opacity:     0;
            display:     none;
            transition:  .3s;

            &:has(.show) {
                .selected {
                    & span {
                        &:last-child {
                            transform: rotate(-180deg);
                        }
                    }
                }
            }

            .selected {
                display:            flex;
                justify-content:    space-between;
                align-items:        center;
                padding:            16px 16px 16px 20px;
                background-color:   #FFF;
                border:             2px solid #C4C9D7;
                border-radius:      10px;

                & span {
                    display:      flex;
                    align-items:  center;
                    transition:   0.3s;
                    color:        #2F1D49;
                }
            }

            .options {
                position:           absolute;
                top:                calc(100% + 5px);
                left:               0;
                right:              0;
                padding:            16px 16px 16px 20px;
                background-color:   #FFF;
                border:             2px solid #C4C9D7;
                border-radius:      10px;
                box-shadow:         0 2px 5px rgba(0, 0, 0, 0.1);
                display:            none;
                z-index:            999;

                &.show {
                    display: block;
                }

                & div {
                    font-size:          14px;
                    font-style:         normal;
                    font-weight:        600;
                    line-height:        20px;
                    text-transform:     uppercase;
                    color:              #2F1D49;
                    padding:            10px;
                    background-color:   #fff;
                    cursor:             pointer;

                    &.active {
                        border-radius:  10px;
                        background:     #F2F4F7;
                    }

                    &:not(:last-child) {
                        margin-bottom: 5px;
                    }
                }
            }
        }
    }
}

#blogs {
    padding: 50px 0 100px;

    .container {
        .blogs {
            display:        flex;
            flex-direction: column;
            align-items:    center;
            gap:            50px;
        }

        .blog-cards {
            display:               grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap:                   100px 20px;

            .blog-card {
                display:        flex;
                flex-direction: column;
                gap:            20px;
                width:          100%;
                position:       relative;

                .blog-img {
                    position: relative;
                    width:    100%;
                    height:   216px;

                    & img {
                        &:first-child {
                            width:          100%;
                            height:         100%;
                            object-fit:     cover;
                            border-radius:  10px 10px 10px 70px;
                        }

                        &:last-child {
                            max-width:      51px;
                            position:       absolute;
                            bottom:         -9px;
                            left:           -10px;
                            border:         10px solid #FEFDFC;
                            border-radius:  51px;
                        }
                    }
                }

                .blog-content {
                    display:         flex;
                    flex-direction:  column;
                    justify-content: space-between;
                    gap:             20px;
                    flex-grow:       1;

                    .blog-name {
                        font-size:      14px;
                        font-style:     normal;
                        font-weight:    600;
                        line-height:    20px; /* 142.857% */
                        color:          #2F1D49;
                    }

                    .blog-tags {
                        display: flex;
                        gap:     10px;

                        & button {
                            padding: 9px 14px;
                        }
                    }
                }
            }
        }
    }
}

@media screen and (max-width: 1280px) {
    #hero {
        .container {
            .hero {
                padding: 162px 0 0;
            }
        }
    }

    #blogs {
        .container {
            .blog-cards {
                grid-template-columns: auto auto;
                gap:                   50px 20px;
            }
        }
    }
}

@media screen and (max-width: 1024px) {
    #hero {
        .container {
            .hero {
                padding: 130px 0 0;
            }

            .hero-actions {
                gap: 2px;
            }
        }
    }
}

@media screen and (max-width: 768px) {
    #hero {
        .container {
            .hero-actions {
                display:                grid;
                grid-template-columns:  auto auto;
                gap:                    8px;
            }
        }
    }

    #blogs {
        .container {
            .blog-cards {
                grid-template-columns: auto;
                gap:                   60px;
            }
        }
    }
}

@media screen and (max-width: 480px) {
    #hero {
        .container {
            gap:            10px;
            padding-bottom: 40px;

            .hero {
                padding: 93px 0 0;

                & p {
                    max-width: 100%;
                }
            }

            .hero-actions {
                display: none;
            }

            .category-dropdown {
                opacity:  1;
                display:  block;
            }
        }
    }

    #blogs {
        padding: 20px 0 50px;

        .container {
            .blog-cards {
                .blog-card {
                    .blog-img {
                        height: 174px;

                        & img {
                            &:last-child {
                                bottom:  -11px;
                            }
                        }
                    }
                }
            }
        }
    }
}