wordpress function - add responsive thumbnail / hero-image.jpg with ACF - add <style> to wp_head

gistfile1.txt

add_action( 'wp_head', 'motyw_add_custom_style_css', 1000 );

function motyw_add_custom_style_css() { ?>

  <?php $queried_object = get_queried_object(); // fix dla kategorii ?> 

  <?php if ( function_exists( 'the_field' ) ) : ?>

    <style type="text/css">

      <?php $attachment_id_hero_image = get_field( 'hero-image' ); ?>
      <?php $thumbnail_small = wp_get_attachment_image_src( $attachment_id_hero_image, 'small' ); ?>
      <?php $thumbnail_medium = wp_get_attachment_image_src( $attachment_id_hero_image, 'medium' ); ?>
      <?php $thumbnail_large = wp_get_attachment_image_src( $attachment_id_hero_image, 'large' ); ?>
      <?php $thumbnail_full = wp_get_attachment_image_src( $attachment_id_hero_image, 'full' ); ?>

      @media (min-width: 1px) and (max-width: 480px) { .hero-image { background-image:url(<?php echo $thumbnail_small[0] ?>); } }
      @media (min-width: 481px) and (max-width: 768px) { .hero-image { background-image:url(<?php echo $thumbnail_medium[0] ?>); } }
      @media (min-width: 769px) and (max-width: 1440px) { .hero-image { background-image:url(<?php echo $thumbnail_large[0] ?>); } }
      @media (min-width: 1441px) { .hero-image { background-image:url(<?php echo $thumbnail_full[0] ?>); } }

    </style>

  <?php endif; ?>

<?php }