Site Title

trang4

/* Reset CSS */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

/* Container chính */
.container {
width: 100%;
padding: 5px;
background: yellow;
border: 2px solid black;
}

/* Grid layout */
.grid {
display: grid;
grid-template-columns: repeat(6, 1fr); /* Giữ nguyên 6 cột */
gap: 15px;
}

/* Ô vuông */
.square {
background: pink;
position: relative;
overflow: hidden;
border: 2px solid black;
padding: 5px;
}

/* Tỉ lệ chiều cao = 65% chiều rộng */
.square::before {
content: “”;
display: block;
padding-top: 65%; /* Thay đổi từ 100% xuống 65% */
}

/* Nội dung bên trong */
.content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
color: red;
font-size: 1.2rem;
}