.arak-container {
    margin: 2em 0;
    font-family: "Montserrat", Sans-serif;
}

.arak-category-section {
    margin-bottom: 3em;
}

.arak-category-title {
    margin-bottom: 1em;
    color: #191919;
    font-family: "Montserrat", Sans-serif;
    font-size: 19px;
    font-weight: 600;
    line-height: 32px;
    letter-spacing: 0.06px;
    text-transform: uppercase;
}

.arak-header-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 1em;
    padding: 0.5em;
    background-color: #f5f5f5;
    color: #191919;
    font-family: "Montserrat", Sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 32px;
    letter-spacing: 0.06px;
}

.arak-grid {
    display: grid;
    gap: 1em;
}

.arak-item {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 1em;
    padding: 1em;
    border-bottom: 1px solid #eee;
}

.arak-title {
    margin: 0;
    color: #191919;
    font-family: "Montserrat", Sans-serif;
    font-size: 17px;
    font-weight: 400;
    line-height: 32px;
    letter-spacing: 0.06px;
}

.arak-leiras {
    color: #191919;
    font-family: "Montserrat", Sans-serif;
    font-size: 17px;
    font-weight: 300;
    line-height: 32px;
    letter-spacing: 0.06px;
    margin-top: 0.5em;
}

.arak-idotartam {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: #191919;
    font-family: "Montserrat", Sans-serif;
    font-size: 17px;
    font-weight: 300;
    line-height: 32px;
    letter-spacing: 0.06px;
}

.arak-ar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: #191919;
    font-family: "Montserrat", Sans-serif;
    font-size: 17px;
    font-weight: 600;
    line-height: 32px;
    letter-spacing: 0.06px;
}

@media (max-width: 768px) {
    .arak-header-row,
    .arak-item {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .arak-header-row {
        display: none;
    }
    
    .arak-idotartam,
    .arak-ar {
        justify-content: center;
        padding: 0.5em 0;
    }
    
    .arak-idotartam:before {
        content: "Időtartam: ";
        font-weight: 600;
    }
    
    .arak-ar:before {
        content: "Ár: ";
        font-weight: 600;
    }
}