Accordion card layout in HTML and CSS

gistfile1.txt

<div class="card accordion">
    <div class="card-image">
        <img src="https://vipprops.ae/wp-content/uploads/jet-form-builder/2172fde49301047270b2897085e4319d/2024/09/Ocean-terrace.jpg" alt="Ocean Terrace">
    </div>
    <div class="card-content">
        <h3>Hazrat Bilal Timber/Twing Accordion Card Layout 03</h3>
        <div class="accordion-sections">
            <div class="accordion-section">
                <input type="checkbox" id="section1" class="accordion-toggle">
                <label for="section1" class="accordion-header">Section 1</label>
                <div class="accordion-body">
                    <div class="field-row">
                        <div class="field">Field 1: Value</div>
                        <div class="field">Field 2: Value</div>
                        <div class="field">Field 3: Value</div>
                    </div>
                    <div class="field-row">
                        <div class="field">Field 4: Value</div>
                        <div class="field">Field 5: Value</div>
                        <div class="field">Field 6: Value</div>
                    </div>
                    <div class="field-row">
                        <div class="field">Field 7: Value</div>
                        <div class="field">Field 8: Value</div>
                        <div class="field">Field 9: Value</div>
                    </div>
                </div>
            </div>
            <div class="accordion-section">
                <input type="checkbox" id="section2" class="accordion-toggle">
                <label for="section2" class="accordion-header">Section 2</label>
                <div class="accordion-body">
                    <div class="field-row">
                        <div class="field">Field 10: Value</div>
                        <div class="field">Field 11: Value</div>
                        <div class="field">Field 12: Value</div>
                    </div>
                    <div class="field-row">
                        <div class="field">Field 13: Value</div>
                        <div class="field">Field 14: Value</div>
                        <div class="field">Field 15: Value</div>
                    </div>
                    <div class="field-row">
                        <div class="field">Field 16: Value</div>
                        <div class="field">Field 17: Value</div>
                        <div class="field">Field 18: Value</div>
                    </div>
                </div>
            </div>
            <div class="accordion-section">
                <input type="checkbox" id="section3" class="accordion-toggle">
                <label for="section3" class="accordion-header">Section 3</label>
                <div class="accordion-body">
                    <div class="field-row">
                        <div class="field">Field 19: Value</div>
                        <div class="field">Field 20: Value</div>
                        <div class="field">Field 21: Value</div>
                    </div>
                    <div class="field-row">
                        <div class="field">Field 22: Value</div>
                        <div class="field">Field 23: Value</div>
                        <div class="field">Field 24: Value</div>
                    </div>
                    <div class="field-row">
                        <div class="field">Field 25: Value</div>
                        <div class="field">Field 26: Value</div>
                        <div class="field">Field 27: Value</div>
                    </div>
                </div>
            </div>
            <!-- Add more sections as needed -->
        </div>
        <div class="buttons">
            <button class="edit">Edit</button>
            <button class="delete">Delete</button>
            <button class="publish">Publish</button>
        </div>
    </div>
</div>

gistfile2.txt

.card.accordion {
    display: flex;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    margin: 20px;
}

.card-image {
    width: 30%;
    flex-shrink: 0;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.card-content {
    width: 70%;
    padding: 20px;
    box-sizing: border-box;
}

.card-content h3 {
    margin-top: 0;
    font-size: 20px;
    color: #333;
}

.accordion-sections {
    margin-top: 10px;
}

.accordion-section {
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.accordion-toggle {
    display: none;
}

.accordion-header {
    display: block;
    padding: 10px;
    background: #f9f9f9;
    cursor: pointer;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-weight: bold;
}

.accordion-body {
    display: none;
    padding: 10px;
}

.accordion-toggle:checked + .accordion-header + .accordion-body {
    display: block;
}

.field-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Space between fields */
}

.field {
    width: calc(33.333% - 20px); /* 3 fields in a row with space between */
    margin-bottom: 20px; /* Space between rows */
}

.buttons {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.buttons button {
    border: none;
    padding: 10px 20px;
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

.buttons .edit {
    background-color: #007bff;
}

.buttons .delete {
    background-color: #dc3545;
}

.buttons .publish {
    background-color: #28a745;
}

@media (max-width: 768px) {
    .card.accordion {
        flex-direction: column;
    }

    .card-image {
        width: 100%;
        height: auto;
    }

    .card-content {
        width: 100%;
    }

    .field-row {
        flex-direction: column;
    }

    .field {
        width: 100%;
    }

    .buttons {
        flex-direction: column;
        gap: 5px;
    }
}