.equipments .mapping { position: relative; width: 450px; height: 388px; margin: auto; } .equipments .mapping img { max-width: 450px; } .equipments .mapping .item-mapping { position: absolute; display: flex; justify-content: center; align-items: center; } .equipments .mapping .item0 { bottom: 94px; width: 70px; height: 130px; left: 45px; } .equipments .mapping .item1 { bottom: 94px; width: 70px; height: 130px; right: 36px; } .equipments .mapping .item2 { top: 58px; width: 56px; height: 65px; left: 194px; } .equipments .mapping .item3 { top: 177px; width: 82px; height: 98px; left: 184px; } .equipments .mapping .item4 { bottom: -13px; width: 60px; height: 74px; left: 195px; } .equipments .mapping .item5 { bottom: -5px; width: 83px; height: 54px; left: 40px; } .equipments .mapping .item6 { bottom: -17px; width: 57px; height: 74px; right: 42px; } .equipments .mapping .item7 { top: 33px; width: 127px; height: 112px; right: 22px; } .equipments .mapping .item8 { display: none; } .equipments .mapping .item9 { top: 213px; width: 30px; height: 30px; right: 130px; } .equipments .mapping .item10 { bottom: -5px; width: 30px; height: 30px; left: 137px; } .equipments .mapping .item11 { bottom: -6px; width: 30px; height: 30px; right: 131px; }
/* PARA CELULARES */
@media (max-width: 500px) { /* Estilos para telas menores que 768px (telas de tablets e smartphones) */ .equipments .mapping { position: relative; width: 100%; height: 100%; } .equipments .mapping img { max-width: 100%; } .equipments .mapping .item-mapping { position: absolute; display: flex; justify-content: center; align-items: center; } .equipments .mapping .item0 { bottom: 33vw; width: 70px; height: 130px; left: 7vw; } .equipments .mapping .item1 { bottom: 34vw; width: 70px; height: 130px; right: 5vw; } .equipments .mapping .item2 { top: 8vw; width: 56px; height: 65px; left: 37vw; } .equipments .mapping .item3 { top: 32vw; width: 82px; height: 98px; left: 34vw; } .equipments .mapping .item4 { bottom: 14vw; width: 60px; height: 74px; left: 37vw; } .equipments .mapping .item5 { bottom: 16vw; width: 83px; height: 54px; left: 5vw; } .equipments .mapping .item6 { bottom: 14vw; width: 57px; height: 74px; right: 7vw; } .equipments .mapping .item7 { top: 4vw; width: 127px; height: 112px; right: 1vw; } .equipments .mapping .item8 { display: none; } .equipments .mapping .item9 { top: 41vw; width: 30px; height: 30px; right: 25vw; } .equipments .mapping .item10 { bottom: 17vw; width: 30px; height: 30px; left: 26vw; } .equipments .mapping .item11 { bottom: 17vw; width: 30px; height: 30px; right: 25vw; } }
/* PARA CELULARES MENORES */
@media (max-width: 360px) { /* Estilos para telas menores que 768px (telas de tablets e smartphones) */ .equipments .mapping { position: relative; width: 100%; height: 100%; } .equipments .mapping img { max-width: 100%; } .equipments .mapping .item-mapping { position: absolute; display: flex; justify-content: center; align-items: center; } .equipments .mapping .item0 { bottom: 29vw; width: 70px; height: 130px; left: 7vw; } .equipments .mapping .item1 { bottom: 29vw; width: 70px; height: 130px; right: 4vw; } .equipments .mapping .item2 { top: 8vw; width: 56px; height: 65px; left: 35vw; } .equipments .mapping .item3 { top: 31vw; width: 82px; height: 98px; left: 32vw; } .equipments .mapping .item4 { bottom: 11vw; width: 60px; height: 74px; left: 35vw; } .equipments .mapping .item5 { bottom: 13vw; width: 83px; height: 54px; left: 3vw; } .equipments .mapping .item6 { bottom: 11vw; width: 57px; height: 74px; right: 5vw; } .equipments .mapping .item7 { top: 2vw; width: 127px; height: 112px; right: -2vw; } .equipments .mapping .item8 { display: none; } .equipments .mapping .item9 { top: 40vw; width: 30px; height: 30px; right: 23vw; } .equipments .mapping .item10 { bottom: 14vw; width: 30px; height: 30px; left: 25vw; } .equipments .mapping .item11 { bottom: 14vw; width: 30px; height: 30px; right: 23vw; } }
/* PARA TABLETS */
@media (max-width: 992px) and (min-width: 768px) { /* Estilos para telas menores que 768px (telas de tablets e smartphones) */ .equipments .mapping { position: relative; width: 100%; height: 100%x; } .equipments .mapping img { max-width: 390px; } .equipments .mapping .item-mapping { position: absolute; display: flex; justify-content: center; align-items: center; } .equipments .mapping .item0 { bottom: 130px; width: 70px; height: 130px; left: 34px; } .equipments .mapping .item1 { bottom: 128px; width: 70px; height: 130px; right: 27px; } .equipments .mapping .item2 { top: 44px; width: 56px; height: 65px; left: 167px; } .equipments .mapping .item3 { top: 150px; width: 82px; height: 98px; left: 153px; } .equipments .mapping .item4 { bottom: 36px; width: 60px; height: 74px; left: 165px; } .equipments .mapping .item5 { bottom: 45px; width: 83px; height: 54px; left: 27px; } .equipments .mapping .item6 { bottom: 35px; width: 57px; height: 74px; right: 34px; } .equipments .mapping .item7 { top: 22px; width: 127px; height: 112px; right: 7px; } .equipments .mapping .item8 { display: none; } .equipments .mapping .item9 { top: 185px; width: 30px; height: 30px; right: 111px; } .equipments .mapping .item10 { bottom: 47px; width: 30px; height: 30px; left: 117px; } .equipments .mapping .item11 { bottom: 48px; width: 30px; height: 30px; right: 110px; } }