:root {
    --primary: #064181;
    --secondary: #9F9F9F;
}

body {
    font-size: 16px;
    margin: 0;
    font-family: "Roboto", sans-serif;
}

.sub {
    color: var(--secondary);
    font-weight: 300;
    margin-bottom: 15px;
    line-height: 1.7;
}

.date {
    font-weight: 400;
}

.price {
    color: var(--primary);
    font-size: 60px;
    font-weight: 500;
    margin-bottom: 15px;
    line-height: 1;
}

small {
    font-size: 30px;
}

.arrows {
    height: 20px;
    margin-right: 15px;
    vertical-align: middle;
}

.share-rule {
    border-bottom: 1px solid var(--primary);
    margin-bottom: 15px;
}

@media screen and (max-width: 1280px) {
    .container {
        display: flex;
        column-gap: 50px;
    }

    .share-rule {
        border-bottom: 0px;
        border-right: 1px solid var(--primary);
        padding-right: 50px;
    }
}

@media screen and (max-width: 769px) {
    .price {
        font-size: 40px;
    }
}

@media screen and (max-width: 540px) {
    .container {
        flex-direction: column;
        row-gap: 0px;
    }

    .share-rule {
        border-bottom: 1px solid var(--primary);
        border-right: 0px soild var(--primary);
    }
}