body {
    font-family: var(--primary_font_family);
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.container {
    max-width: 900px;
    margin: auto;
    padding: 20px;
    margin-top: 100px;
}
.product-header {
    display: flex;
    align-items: center;
    gap: 20px;
}
.product-image {
    max-width: 180px;
    height: auto;
}
.product-title {
    font-size: 2em;
    color: rgb(117, 56, 122);
}
.product-description {
    font-size: 1em;
    color: #555;
}
.features-list {
    background-color: #eee;
    padding: 15px;
    border-radius: 5px;
}
.features-list hr {
    height: 1px;
    border: none;
    background-color: black
}
.application-container {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    gap: 10px;
}
.cta-buttons {
    margin-top: 20px;
}
.cta-button, .datasheet-button {
    background-color: var(--button_color);
    color: white;
    padding: 10px 15px;
    text-align: center;
    border-radius: 5px;
    text-decoration: none;
    display: inline-block;
    margin: 5px;
}
.cta-button:hover, .datasheet-button:hover {
    background-color: var(--button_color_hover);
}

@media (max-width: 450px) {
    .container {
        display: flex;
        flex-flow: row wrap;
        width: 400px;
        margin: 100px 5px 0 5px;
    }

    .product-header {
        display: flex;
        flex-flow: row wrap;
        align-items: center;
        justify-content: center;
        width: 100%;
        gap: 20px;
    }
    .product-image {
        display: flex;
        flex-flow: row wrap;
        max-width: 200px;
        height: auto;
    }
    .product-title {
        font-size: 2em;
        color: rgb(117, 56, 122);
    }
    .product-description {
        font-size: 1em;
        color: #555;
        margin-bottom: 10px;;
    }
    .features-list {
        background-color: #eee;
        padding: 15px;
        border-radius: 5px;
    }
    .application-container {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        gap: 10px;
    }

    .cta-buttons {
        margin-top: 20px;
    }
    .cta-button, .datasheet-button {
        background-color: var(--button_color);
        color: white;
        padding: 10px 15px;
        text-align: center;
        border-radius: 5px;
        text-decoration: none;
        display: inline-block;
        margin: 5px;
    }
    .cta-button:hover, .datasheet-button:hover {
        background-color: var(--button_color_hover);
    }
}