*, *::before, *::after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background: white;
}
.item1 {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: 600; 
    font-size: 2.5rem;
    padding: 1px;
    margin: 1px;
    border: 3px solid black;
    border-radius: 2px;
    background: #FFC40C;
    color: black;

    display: flex;
    justify-content: center;
    align-items: center;
}
.grid-item {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: 600; 
    /* font-size: 2.5rem; */
    font-size: 2.5rem;
    border: 2px solid var(--color-border);
    border-radius: 4px;
    background: #0A0A0A;  
    color: white;
    /* LAYOUT */
    display: flex;
    justify-content: center; /* Horizontal */
    align-items: center;     /* Vertical */
}
.grid-playground {
    display: flex;
    flex-direction: column;
    justify-content: space-around; /* Center horizontally */
    align-items: flex-start;    /* Center vertically */ 
    border: 3px solid black;
    border-radius: 2px;
    background: white ;
    padding: 15px;
    gap: 25px;
}
/* Grid-Container-1 */
.grid-container-1 {
    display: grid;
    grid-template-rows: repeat(6, 60px);
    grid-template-columns: repeat(6, 60px);
    outline: 2px dashed black; /* Highlight container */
    grid-auto-columns: 120px;
    grid-auto-flow: column;
    gap: 1px;
    padding: 15px;
}
.item-01 {
    grid-row: 1 / 5;
    grid-column:1 / 5;
}
.item-02 {
    grid-row: 5 / 7;
    grid-column:5 / 7;
}
.item-03 {
    grid-row: 1 / 5;
    grid-column:5 / 7;
}
.item-04 {
    grid-row: 5 / 7;
    grid-column:1 / 5;
}
/* Grid-Container-2 */
.grid-container-2 {
    display: grid;
    grid-template-rows: repeat(10, 45px);
    grid-template-columns: minmax(40px, 2fr) repeat(10, minmax(30px, 1fr)) minmax(40px, 2fr);
    outline: 2px solid black;
    background: #7FFF00;
    grid-gap: 1px;
    padding: 1px;
}
.grid-item-11 { grid-row: 1 / 3; grid-column: 2 / 4; }
.grid-item-12 { grid-row: 5 / 6; grid-column: 2 / 4; }
.grid-item-13 { grid-row: 3 / 5; grid-column: 2 / 7; }
.grid-item-14 { grid-row: 1 / 3; grid-column: 4 / 7; }
.grid-item-15 { grid-row: 5 / 6; grid-column: 4 / 7; }
.grid-item-16 { grid-area: 6 / 2 / 11 / 7; }
.grid-item-17 { grid-area: 1 / 7 / 6 / 12; }
.grid-item-18 { grid-area: 6 / 7 / 8 / 9; }
.grid-item-19 { grid-area: 6 / 9 / 8 / 12; }
.grid-item-20 { grid-area: 8 / 7 / 10 / 12; }
.grid-item-21 { grid-area: 10 / 7 / 11 / 9; }
.grid-item-22 { grid-area: 10 / 9 / 11 / 12; }
.grid-item-23 { grid-area: 1 / 1 / 11 / 2; }
.grid-item-24 { grid-area: 1 / 12 / 11 / 13; }

/* Grid-Container-3 */
.grid-playground .grid-container-3rd h3 {
    display: flex;
    width: 100%;
    justify-content: center;
    font-size: 2rem;
    letter-spacing: -0.9px;
}
/* Layout-1 */
.grid-container-3-layout-1 {
    display: grid;
    grid-template-rows: 2fr 10fr 2fr;
    grid-template-columns: 180px 380px;
    grid-template-areas: 
    'header header'
    'sidebar content'
    'sponsor sponsor'
    'footer footer';
    outline: 2px solid black;
    background: #7FFF00;
    grid-gap: 2px;
    padding: 4px;
}
.header {
    grid-area: header;
}
.sidebar {
    grid-area: sidebar;
}
.content {
    grid-area: content;
}
.footer {
    grid-area: footer;
}
.sponsor {
    grid-area: sponsor;
}
/* Layout-2 */
.grid-container-3-layout-2 {
    display: grid;
    grid-template-rows: 2fr 10fr 2fr;
    grid-template-columns: 180px 380px 180px;
    grid-template-areas: 
    'header header header'
    'left main right'
    'footer footer footer';
    outline: 2px solid black;
    background: #7FFF00;
    grid-gap: 2px;
    padding: 4px;
}
.header {
    grid-area: header;
}
.left {
    grid-area: left;
}
.main {
    grid-area: main;
}
.right {
    grid-area: right;
}
.footer {
    grid-area: footer;
}
.grid-container-3-layout-3 {
    display: grid;
    grid-template-rows: 1fr 3fr 1fr 1fr;
    grid-template-columns: 320px;
    grid-template-areas: 
    'header'
    'main'
    'sponsor'
    'footer';
    outline: 2px solid black;
    background: #7FFF00;
    grid-gap: 2px;
    padding: 4px;
}
.header {
    grid-area: header;
}
.main {
    grid-area: main;
}
.sponsor {
    grid-area: sponsor;
}
.footer {
    grid-area: footer;
}
/* Container-4 */
.grid-container-4th {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

}
.grid-item1 {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: 600; 
    font-size: 2.5rem;
    border: 2px solid var(--color-border);
    border-radius: 4px;
    background: #0A0A0A;  
    color: white;
    text-align: center;
    /* LAYOUT */
    width: 280px;  
}
/* --- M A C - M I N I --- */
.macmini-product-card {
    display: flex;
    flex-direction: row;
    width: 100%;
    max-width: 800px;
    padding: 0.6rem;
    gap: 0.6rem;
    margin: 1rem auto;
    border: 1px solid gray;
    border-radius: 4px;
    font-family: 'Open Sans', 'Helvetica Neue', sans-serif;
}
.macmini-img img{
    width: 100%;
    max-width: 380px;
    object-fit: cover;
    border-radius: 8px; 
}
.macmini-info {
    gap: 0.4rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    flex: 1;
}
.macmini-title {
    font-size: 1.8rem;
    /* height: 50%; */
    letter-spacing: -0.8px;
}
.macmini-description {
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: -0.4px;
    color: #555;
} 
.macmini-price {
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: -0.8px;
}
.macmini-buy-btn {
    width: 100%;
    padding: 0.7rem;
    border: none;
    color: white;
    background: black;
    font-size: 0.9rem;
    border-radius: 4px;
    cursor: pointer;
    transition: 0.2s ease-out;
    font-weight: 500;
}
.macmini-buy-btn:hover {
    opacity: 0.9;
}

.cardwrapper {
    width: 100%;
    margin: 10px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}
.card {
    width: 100%;
    /* height: 55px; */
    height: auto;
    border: 1px solid gray;
    border-radius: 3px;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 500;
    font-family: 'Open Sans', 'Helvetica Neue', sans-serif;
    color: white;
    background: #0A0A0A;

    /* box-layout */
    padding: 10px;
    margin: 0;

    /* flex item-props */
    flex: 1 1 200px;
}

.i1 {
    order: 1;


}
.i2 {
    order: 2;

    /* flex-shrink: 1; */
}
.i3 {
    order: 3;


}