.seismic_bulletins-container {
    @media screen and (max-width: 500px) {
        padding: 20px 10px;
        .row {
            > button {
                width: 100%;
            }
        }
    }

    .row-mobile {
        @media screen and (max-width: 500px) {
            flex-direction: column;
        }
    }

    .flex-block {
        display: flex;
        align-items: center;
        gap: 20px;
    }

    /*.grid-block {*/
    /*    */
    /*}*/

    .seismic-map-container {
        #map-container {
            height: 400px;
        }

        .map-details-block {
            display: flex;
            height: 60px;
            gap: 20px;
            justify-content: center;
            align-items: center;
            background: var(--card-background-color);

            .row {
                .circle {
                    width: 12px;
                    height: 12px;
                    border-radius: 50%;
                }

                span {
                    color: var(--secondary-text-color);
                    font-weight: 400;
                    font-size: 14px;
                }
            }
        }

        .map-details-block-top {
            @media screen and (max-width: 500px) {
                height: 68px;
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                padding: 0 20px;

                .flex-block {
                    flex-direction: column;
                    align-items: flex-start;
                    gap: 5px;
                }
            }
        }

        .map-details-block-bottom {
            @media screen and (max-width: 500px) {
                height: 94px;
                display: flex;
                flex-direction: column;
                gap: 5px;
            }
        }
    }

    .top-block {
        display: flex;
        flex-direction: row;
        justify-content: space-between;

        @media screen and (max-width: 500px) {
            flex-direction: column;
            gap: 5px;
        }

        .events-count {
            color: var(--primary-text-color);
            font-weight: 600;
            font-size: 14px;
            text-align: center;
            white-space: nowrap;

            @media screen and (max-width: 500px) {
                text-align: left;
            }
        }

        .event-divider {
            width: 1px;
            height: 12px;
            background: rgba(0, 0, 0, 0.3);
        }
    }

    .description-block {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: 20px;
        row-gap: 5px;

        @media screen and (max-width: 500px) {
            display: flex;
            flex-direction: column;
        }

        > div {
            display: flex;
            justify-content: space-between;

            span {
                font-size: 16px;
                font-weight: 400;

                &:nth-child(1) {
                    color: var(--secondary-text-color);
                }

                &:nth-child(3) {
                    color: var(--primary-text-color);
                }
            }

            .underline {
                flex-grow: 1;
                border-bottom: 1px dashed rgba(0, 0, 0, 0.12);
                margin: 0 4px 4px;
            }
        }
    }
}