.account-detail{
   display: grid;
   grid-template-columns : repeat(3, 1fr);
   background-color        : var(--color-grey25);
   padding                 : 1.5rem;
}

.company-group-detail{
   display     : flex;
   align-items : center;
   gap         : 1rem;
   color       : var(--color-grey-light);
}
.company-group-sub{
   margin-bottom: var(--size-500);

}
.logo{

   
   border-radius     : var(--radius-25);
   width: 200px;
   
}

.logo img{
   width : 190px;
   margin: auto;
}


details{
   background-color  : var(--color-grey25);
   overflow          : hidden;
   padding           : 0.3rem;
}
/* animasi */
details::details-content{
   block-size           : 0;
   overflow             : hidden;
   transition           :  block-size 1s cubic-bezier(0.4, 0, 0.2, 1), 
                           content-visibility 1s cubic-bezier(0.4, 0, 0.2, 1);
   transition-behavior  : allow-discrete;
}
details[open]::details-content{
   block-size  : auto;
}
details[open] .arrow-down-rotate{
   transform   : rotate(-180deg);
}

summary{
   display              : flex;
   list-style-position  : outside;
   cursor               : pointer;
   align-items          : center;
   justify-content      : space-between;
   padding              : 0.5rem;
   border-radius        : var(--radius-25);
   background-color     : var(--color-grey-blue-cool);
   transition: background-color 0.3s;
}
summary:hover{
   background-color:  hsl(0 0% 20% / 0.3);
}
.arrow-down-rotate{
   transform-origin: center;
   transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.summary-header{
   display: flex;
   /* align-items: center; */
   gap: 1rem;
}
.summary-info {
    display: flex;
    align-items: center;
    gap: 2rem;
}
.summary-content{
   background-color  : var(--color-grey-75);
   padding           : 1.5rem;
   
}