@use '~@epam/promo/assets/styles/colors.scss' as *;

.layout {
    margin: 0 auto;
    background: #FFFFFF;

    .info {
        display: flex;
        flex-wrap: wrap;
        max-width: 1200px;
        width: 100%;
        margin: 0 auto;
        padding: 18px 0 54px;
        justify-content: center;
        align-items: center;

        .info-container {
            width: 384px;
        }

        .info-value {
            font-size: 60px;
            line-height: 72px;
            text-align: center;
            padding-top: 42px;
        }

        .info-caption {
            font-size: 30px;
            line-height: 36px;
            text-align: center;
        }

        .pulse {
            position: relative;

            &::after {
                position: absolute;
                content: '';
                width: 6px;
                height: 6px;
                top: 12px;
                right: 90px;
                box-sizing: border-box;
                border-radius: 50%;
                background-color: $red;
                box-shadow: 0 0 0 5px #FADED9;
                animation: pulse 2s infinite linear;
            }
        }
    }

    @media (max-width: 1280px) {
        .info {
            max-width: 732px;
            padding: 24px 0 48px;

            .info-container {
                width: 244px;
            }

            .info-value {
                font-size: 48px;
                line-height: 72px;
                padding-bottom: 0;
                padding-top: 24px;
            }

            .info-caption {
                font-size: 24px;
                line-height: 36px;
                padding: 0;
            }

            >:not(:first-child) {
                margin-left: 0;
            }

            >:not(:last-child) {
                margin-right: 0;
            }

            .pulse {
                &::after {
                    right: 37px;
                    top: 10px;
                }
            }
        }
    }

    @media (max-width: 768px) {
        .info {
            max-width: none;
            width: inherit;
            padding: 24px 0 30px;
            margin: 0 12px;

            .info-container {
                width: 142px;
            }

            .info-value {
                font-size: 36px;
                line-height: 48px;
                padding-bottom: 0;
                padding-top: 18px;
            }

            .info-caption {
                font-size: 18px;
                line-height: 24px;
                padding: 0;
            }

            >:not(:first-child) {
                margin-left: 0;
            }

            >:not(:last-child) {
                margin-right: 0;
            }

            .pulse {
                &::after {
                    right: 6px;
                    top: 6px;
                }
            }
        }
    }
}

@keyframes pulse {
    0% {
        transform: scale(0.6, 0.6);
    }

    50% {
        transform: scale(1, 1);
    }

    100% {
        transform: scale(0.6, 0.6);
    }
}
