body{ font-family: 'Inter', sans-serif; background-color: #F4F4F5; } p{ margin: 0; } .main{ min-height: 100vh; margin-top: 124px; display: flex; } .main_wrapper{ width: 100%; display: flex; } .main_block1{ margin-top: 24px; width: 130px; margin-right: 56px; } .Word_Genres{ font-size: 26px; margin-bottom: 24px; } .label_cb{ margin-bottom: 40px; display: flex; align-items: center; transition: 0.2s ease; cursor: pointer; } .label_cb:hover{ color: #808080; } .cb{ cursor: pointer; width: 28px; height: 28px; margin-right: 19px; font-size: 20px; } .label_cb:last-child{ margin-bottom: 32px; } .block1_button{ width: 100%; margin-top: 30px; } .button_Apply_book{ background-color: #FFFFFF; display: flex; justify-content:center; align-items: center; width: 125px; height: 29px; border-radius: 30px; border: 1px solid #000000; font-size: 20px; line-height: 39px; transition: 0.2s ease; cursor: pointer; } .button_Apply_book:hover{ background: #BCBCBC; } .Panel_Admin2{ margin-top: 20px; text-align: center; } .Admin_Word2{ text-decoration: none; font-size: 18px; color: #18BDF1; transition: color .2s ease; } .Admin_Word2:hover{ color: #91F0FD; } .main_block2{ width: 100%; margin-top: 30px; display: grid; grid-template-columns: repeat(6, 1fr); grid-column-gap: 115px; grid-row-gap: 67px; } .Conteiner_Films{ width: 241px; height: 516px; } .Img_Films{ width: 241px; height: 335px; } .word_Prince_book{ margin-top: 9px; font-size: 24px; font-weight: 700; height: 28px; } .word_Name_book{ font-size: 19px; font-weight: 700; height: 21px; } .word_Author_book{ font-size: 19px; font-weight: 400; } .word_Genres_book{ font-size: 19px; font-weight: 400; color: #808080; } .Admin_Word1{ text-decoration: none; color: #18BDF1; transition: color .2s ease; margin-right: 10px; } .Admin_Word1:hover{ color: #91F0FD; } .block2_button{ width: 100%; margin-top: 22px; } .button_InBusket_book{ background-color: #A2D7FF; display: flex; justify-content:center; align-items: center; width: 163px; height: 41px; border-radius: 30px; border: 1px solid #A2D7FF; font-size: 20px; line-height: 39px; transition: 0.2s ease; cursor: pointer; } .button_InBusket_book:hover{ background-color: #38AAFF; } @media (max-width: 2560px){ .main_block2{ grid-template-columns: repeat(5, 1fr); grid-column-gap: 115px; } } @media (max-width: 2210px){ .main_block2{ grid-template-columns: repeat(4, 1fr); grid-column-gap: 115px; } } @media (max-width: 1852px){ .main_block2{ grid-template-columns: repeat(3, 1fr); grid-column-gap: 109px; } } @media (max-width: 1485px){ .main_block2{ grid-template-columns: repeat(2, 1fr); } } @media (max-width: 1129px){ .main_block2{ grid-template-columns: repeat(1, 1fr); } } @media (max-width: 430px){ .main_wrapper{ display: flex; flex-direction: column; align-items: center; } .main_block1{ margin-right: 0px; width: 243px; } .Label{ display: flex; } .block1_button{ display: flex; justify-content: center; } .main_block2{ justify-items: center; } } @media (max-width: 242px){ .Word_Genres{ margin-bottom: 7px; } .Label_block_1{ margin-right: 10px; } .main_block1{ width: 100%; } .cb{ width: 16px; height: 16px; margin-right: 0px; } .label_cb{ font-size: 14px; margin-bottom: 4px; } .block1_button{ margin-top: 0px; } .Img_Films{ width: 70%; height: 50%; } .Conteiner_Films{ display: flex; flex-direction: column; align-items: center; width: 100%; height: 100%; } .block2_button{ display: flex; justify-content: center; } }