.branches {position: relative;overflow-y: scroll;}
.branches details {display: grid;grid-template-columns: repeat(3, 1fr);gap: 2rem;margin-bottom: 1rem;display:flex;}
.branches summary {cursor: pointer;list-style-type: none;grid-column: 1;padding: 0.5rem 1rem;border-radius: 0.5rem;font-weight: bold;width:10%;}
.branches details > div {grid-column: 1;flex: 1;position: absolute;top: 0;columns: 1;gap: 1rem;display:grid;grid-template-columns:repeat(3,1fr);width:85%;}
.branches details[open] summary {background-color: #000;color:#fff;}
.branches .card {border: 1px solid #d8c082; padding:10px 15px; border-radius:20px; display:flex; flex-direction:column}
.branches .card h1 {font-size:1rem; line-height:1}
.branches .card img {max-width:18px;}
.branches .card .title {display:flex; align-items:flex-start; justify-content:space-between; padding:10px 0 ;height:2rem}
.branches .card .title > div {display:flex; height:auto; gap:.5rem}
.branches .card .grid {display:flex; align-items:space-between; justify-content:space-between}
.branches .card > .grid {margin-top:.5rem}
.branches .card > .grid p {line-height:1.6; margin:0}

@media (max-width:768px){
.branches summary {width:15%}
.branches details > div {grid-template-columns:repeat(1,1fr);width:70%;}
.branches p {font-size:13px}
}