.devices__container { padding: 0; margin-bottom: 160px; } .card__container { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 30px; margin-bottom: 80px; } .card { box-sizing: border-box; position: relative; display: flex; flex-direction: column; padding: 32px; background: #141414; border-radius: 16px; gap: 10px; } .card__name { margin: 0; font-style: normal; font-weight: 500; font-size: 24px; line-height: 100%; /* identical to box height, or 24px */ /* Landing/White */ color: #ebebeb; opacity: 0.8; } .card__image { width: 292px; height: 271px; object-fit: contain; } .card__image_type {} @media screen and (min-width: 1600px) { .card__image { width: 350px; height: 325px; } .card__name { font-size: 28.8px; } .card { height: 466px; padding: 38px; } .card__container { margin-bottom: 96px; } .devices__container { margin-bottom: 192px; } } @media screen and (max-width: 1279px) { .devices__container { padding-left: 30px; padding-right: 30px; box-sizing: border-box; } .card { padding: 24px; } .card__image { width: 240px; } .card__container { gap: 15px; } .card__image_type1 {} } @media screen and (max-width: 1024px) { .devices__container { padding: 0 20px 0; margin-bottom: 120px; } .card { box-sizing: border-box; height: auto; object-fit: cover; aspect-ratio: 1/1; padding: 32px; } .card__image { width: 100%; height: 222px; } } @media screen and (max-width: 750px) { .card__container { grid-template-columns: 1fr; margin-bottom: 60px; } .card__image { width: 90%; height: 90%; margin: 0 auto; } } @media screen and (max-width: 639px) { .devices__container { padding: 60px 10px 0px; margin-bottom: 0; } .card__container { display: grid; grid-template-columns: 1fr; margin-bottom: 40px; } .card { padding: 24px; box-sizing: border-box; object-fit: cover; aspect-ratio: 1/1; } }