@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Oswald:wght@200..700&display=swap');



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

body {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
}


main {
    padding-top: 40px;
    display: flex;
    gap: 16px;
    max-width: 1174px;
    margin: 0 auto;

    .images_section {
        display: flex;
        gap: 16px;
    }

}
 aside {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

.images_section{
    display: flex;
}


.content{
        display: flex;
        flex-direction: column;
        .content_header {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }
                .green-text {
            color: #29aa04;
            font-weight: 600;
            font-size: 24px;
        }
         h1 {
            font-size: 36px;
            font-weight: 600;
        }
        h4 {
            font-size: 20px;
            color: rgba(0, 0, 0, 0.5);
            font-weight: 600;
        }
        p{
            font-size: 16px;
            font-weight: 600;
            color: rgba(0, 0, 0, 0.5);
        }

        .price_section {
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin-top: 20px;
            margin-bottom: 20px;
        }

    .size_section{
        display: flex;
        flex-direction: column;

        .size_header{
            display: flex;
            justify-content: space-between;
            margin-top: 48px;
            margin-bottom: 24px;
            align-items: center;
        }

        .sizes{
            display: grid;
            gap: 8px;
            grid-template-columns: repeat(2, 1fr);
            margin-bottom: 40px;

            .size{
                padding: 12px 16px;
                border: 1px solid #000;
                text-align: center;
                font-weight: 600;
                font-size: 20px;
                cursor: pointer;
                
                
                
            }

            
        }

       
    }

  .button_container {
            display: flex;
            flex-direction: column;
            gap: 8px;

            button{
                padding: 20px;
                border: none;
                border-radius: 50px;
                font-size: 20px;
                font-weight: 600;
            }

            button:first-child {
                background-color: #000;
                color: #fff;
                cursor: pointer;
            }
             button:last-child {
                background-color: #fff;
                color: #000;
                cursor: pointer;
                border: 1px solid #000;
            }
        }
}