틀:알림 상자/CSS

.ambox {
    width: clamp(80%, 40em, calc(100% - 10px));
    
    margin: 3px auto;
    padding: 5px;
    padding-bottom: 0; /* gap이 맨 아랫줄에 적용되는 문제 수정 */
    gap: 5px;
    
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "ambox-title      ambox-title  ambox-title"
        "ambox-image-left ambox-detail ambox-image-right";
    
    text-align: center;
    
    background-color: #ededed;
}
.ambox-title {
    width: calc(100% - 10px);
    
    padding: 5px;
    
    grid-area: ambox-title;
    
    background-color: #404040;
    color: white;
    font-weight: bold;
}
.ambox-detail {
    width: calc(100% - 10px);
    padding: 0 5px 5px;
    grid-area: ambox-detail;
}
.ambox-image {
    place-self: center;
}
.ambox-image-left {grid-area: ambox-image-left;}
.ambox-image-right {grid-area: ambox-image-right}