.top {
    width: 100%;
    padding: 0 24px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 16px;

    .top-title {
        font-family: var(--star-bold);
        font-size: 32px;
    }

    .top-desc {
        font-family: var(--pret-bold);
        font-size: 16px;
        color: var(--gray);
    }
}

.caffeine-container {
    width: 100%;
    padding: 24px 16px;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    gap: 8px;

    .caffeine-item {
        width: 100%;
        height: 100px;
        box-sizing: border-box;

        padding: 10px 24px;
        padding-left: 10px;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 24px;
        border-radius: 12px;
        background-color: var(--bg-gray);

        .caffeine-item-image {
            height: 100%;
            aspect-ratio: 1/1;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
        }

        .caffeine-item-text {
            font-family: var(--star-bold);
            font-size: 24px;
        }
    }

    .caffeine-item-selected {
        color: white;
        background-color: var(--primary);
    }
}