images on product page

<?php
// Show the first 4 product images as a 2x2 grid.
$images = !empty($this->element->images) ? array_slice($this->element->images, 0, 4) : array();

$height = (int)$this->config->get('product_image_y');
$width  = (int)$this->config->get('product_image_x');
if(empty($height)) $height = (int)$this->config->get('thumbnail_y');
if(empty($width))  $width  = (int)$this->config->get('thumbnail_x');
$opts = array('default' => true, 'forcesize' => $this->config->get('image_force_size', true), 'scale' => $this->config->get('image_scale_mode', 'inside'));
?>
<div id="hikashop_product_image_main" class="hikashop_global_image_div hikashop_img_grid">
<?php
foreach($images as $image) {
	echo '<div class="hikashop_img_grid_cell">';
	if($this->image->override) {
		echo $this->image->display(@$image->file_path, true, @$image->file_name, '', '', $width, $height);
	} else {
		$img = $this->image->getThumbnail(@$image->file_path, array('width' => $width, 'height' => $height), $opts);
		if(@$img->success) {
			echo '<img src="'.$img->url.'" alt="'.$this->escape((string)@$image->file_name).'" title="'.$this->escape((string)@$image->file_description).'" />';
		}
	}
	echo '</div>';
}
?>
</div>
<style>
.hikashop_img_grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; max-width:<?php echo (2*$width)+10; ?>px; margin:auto; }
.hikashop_img_grid_cell img { width:100%; height:auto; display:block; }
@media (max-width:480px){ .hikashop_img_grid{ grid-template-columns:1fr; } }
</style>