#hero {
    padding-bottom: 60px;

    .container {
        .hero {
            max-width:  800px;
            margin:     0 auto;
            padding:    162px 0 0;

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

#docs {
    padding-bottom: 100px;

    .docs {
        display: flex;
        gap:     60px;

        .docs-lists {
            display:                grid;
            grid-template-columns:  auto auto;
            gap:                    20px;
            min-width:              calc(100% - 360px); /* 300px actions + 60px gap */

            .list {
                border-radius:  30px;
                background:     #FFF;
                padding:        30px;
                box-shadow:     0 14px 44px 0 rgba(0, 0, 0, 0.03);

                &:first-child {
                    grid-row: 1 / span 2;

                    & ul {
                        gap: 20px;
                    }
                }

                & h5 {
                    font-size:      18px;
                    font-style:     normal;
                    font-weight:    600;
                    line-height:    24px; /* 133.333% */
                    color:          #FF3D71;
                    padding-bottom: 30px;
                }

                & ul {
                    display:        flex;
                    flex-direction: column;
                    gap:            30px;

                    & li {
                        & a {
                            display:        flex;
                            align-items:    center;
                            gap:            6px;

                            font-size:       14px;
                            font-style:      normal;
                            font-weight:     600;
                            line-height:     20px; /* 142.857% */
                            color:           #2F1D49;
                            text-decoration: none;
                            transition:      0.1s;

                            & svg {
                                width:  22px;
                                height: 22px;

                                & path {
                                    stroke: #7061EF;
                                    fill:   #7061EF;
                                }
                            }
                        }

                        &:hover {
                            & a {
                                color:   #7061EF;
                            }
                        }
                    }
                }
            }
        }

        .docs-actions {
            display:        flex;
            flex-direction: column;
            gap:            20px;

            & h4 {
                font-size:      22px;
                font-style:     normal;
                font-weight:    700;
                line-height:    28px; /* 127.273% */
                color:          #2F1D49;
            }

            .actions-btns {
                display:        flex;
                flex-direction: column;
                gap:            10px;

                .btn {
                    max-width: fit-content;
                }
            }
        }
    }
}

@media screen and (max-width: 1280px) {
    #docs {
        .docs {
            gap: 40px;

            .docs-lists {
                min-width: calc(100% - 340px); /* 300px actions + 40px gap */
                gap:       15px;

                .list {
                    padding: 25px;
                }
            }
        }
    }
}

@media screen and (max-width: 1024px) {
    #docs {
        .docs {
            flex-direction: column;
        }
    }
}

@media screen and (max-width: 768px) {
    #docs {
        .docs {
            .docs-lists {
                grid-template-columns: auto;

                .list {
                    & h5 {
                        font-size:   16px;
                        line-height: 22px;
                    }

                    & ul {
                        & li {
                            & a {
                                font-size:    12px;
                                line-height:  18px;

                                & svg {
                                    width:  20px;
                                    height: 20px;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

@media screen and (max-width: 600px) {
    #docs {
        .docs {
            .docs-lists {
                .list {
                    & h5 {
                        font-size:   18px;
                        line-height: 24px; /* 133.333% */
                    }

                    & ul {
                        & li {
                            & a {
                                font-size:    14px;
                                line-height:  20px; /* 142.857% */

                                & svg {
                                    width:  22px;
                                    height: 22px;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

@media screen and (max-width: 480px) {
    #hero {
        padding-bottom: 30px;

        .container {
            .hero {
                padding: 93px 0 0;

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