@media (min-width: 1281px) and (max-width: 1366px) {

  *, *::after, *::before {
      border: 0;
      margin: 0;
      padding: 0;
      /* box-sizing: border-box; */
  }

  :root {
    --hue: 206;
    --bkg: var(--hue) 50% 96%;
    --text: var(--hue) 70% 9%;
    --dark: var(--hue) 70% 3%;
  }

  .image-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    /* gap: 1rem; */
    overflow: hidden;
  }

  .image-item-1 {
    flex: 1 0 28%;
    min-width: 200px;
    cursor: zoom-in;
    /* border: 1px solid #000; */
    margin: 0em .5em;
  }

  .image-item {
    flex: 1 0 28%;
    min-width: 200px;
    cursor: zoom-in;
    /* border: 1px solid #000; */
    margin: 0em .5em;
  }

  .image-item-1 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 250ms cubic-bezier(0.79, 0.25, 0, 1.07);
  }

  .image-item-1:is(:hover, :focus) img {
    transform: scale(1.03);
  }

  .image-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 250ms cubic-bezier(0.79, 0.25, 0, 1.07);
  }

  .image-item:is(:hover, :focus) img {
    transform: scale(1.03);
  }

}

@media (min-width: 1201px) and (max-width: 1280px) {

  *, *::after, *::before {
      border: 0;
      margin: 0;
      padding: 0;
      /* box-sizing: border-box; */
  }

  :root {
    --hue: 206;
    --bkg: var(--hue) 50% 96%;
    --text: var(--hue) 70% 9%;
    --dark: var(--hue) 70% 3%;
  }

  .image-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    /* gap: 1rem; */
    overflow: hidden;
  }

  .image-item-1 {
    flex: 1 0 28%;
    min-width: 200px;
    cursor: zoom-in;
    /* border: 1px solid #000; */
    margin: 0em .5em;
  }

  .image-item {
    flex: 1 0 28%;
    min-width: 200px;
    cursor: zoom-in;
    /* border: 1px solid #000; */
    margin: 0em .5em;
  }

  .image-item-1 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 250ms cubic-bezier(0.79, 0.25, 0, 1.07);
  }

  .image-item-1:is(:hover, :focus) img {
    transform: scale(1.03);
  }

  .image-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 250ms cubic-bezier(0.79, 0.25, 0, 1.07);
  }

  .image-item:is(:hover, :focus) img {
    transform: scale(1.03);
  }

}

@media (min-width: 813px) and (max-width: 1200px) {

  *, *::after, *::before {
      border: 0;
      margin: 0;
      padding: 0;
      /* box-sizing: border-box; */
  }

  :root {
    --hue: 206;
    --bkg: var(--hue) 50% 96%;
    --text: var(--hue) 70% 9%;
    --dark: var(--hue) 70% 3%;
  }

  .image-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    /* gap: 1rem; */
    overflow: hidden;
  }

  .image-item-1 {
    flex: 1 0 28%;
    min-width: 200px;
    cursor: zoom-in;
    /* border: 1px solid #000; */
    margin: 0em .5em;
  }

  .image-item {
    flex: 1 0 28%;
    min-width: 200px;
    cursor: zoom-in;
    /* border: 1px solid #000; */
    margin: 0em .5em;
  }

  .image-item-1 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 250ms cubic-bezier(0.79, 0.25, 0, 1.07);
  }

  .image-item-1:is(:hover, :focus) img {
    transform: scale(1.03);
  }

  .image-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 250ms cubic-bezier(0.79, 0.25, 0, 1.07);
  }

  .image-item:is(:hover, :focus) img {
    transform: scale(1.03);
  }

}

@media (min-width: 652px) and (max-width: 812px) {

  *, *::after, *::before {
      border: 0;
      margin: 0;
      padding: 0;
      /* box-sizing: border-box; */
  }

  :root {
    --hue: 206;
    --bkg: var(--hue) 50% 96%;
    --text: var(--hue) 70% 9%;
    --dark: var(--hue) 70% 3%;
  }

  .image-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    /* gap: 1rem; */
    overflow: hidden;
  }

  .image-item-1 {
    flex: 0 0 28%;
    min-width: 200px;
    cursor: zoom-in;
    /* border: 1px solid #000; */
    margin: 0em .5em;
  }

  .image-item {
    flex: 0 0 28%;
    min-width: 200px;
    cursor: zoom-in;
    /* border: 1px solid #000; */
    margin: 0em .5em;
  }

  .image-item-1 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 250ms cubic-bezier(0.79, 0.25, 0, 1.07);
  }

  .image-item-1:is(:hover, :focus) img {
    transform: scale(1.03);
  }

  .image-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 250ms cubic-bezier(0.79, 0.25, 0, 1.07);
  }

  .image-item:is(:hover, :focus) img {
    transform: scale(1.03);
  }

}

@media (min-width: 530px) and (max-width: 651px) {

  *, *::after, *::before {
      border: 0;
      margin: 0;
      padding: 0;
      /* box-sizing: border-box; */
  }

  :root {
    --hue: 206;
    --bkg: var(--hue) 50% 96%;
    --text: var(--hue) 70% 9%;
    --dark: var(--hue) 70% 3%;
  }

  .image-container {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    /* gap: 1rem; */
    overflow: hidden;
  }

  .image-item-1 {
    flex: 1 0 28%;
    min-width: 200px;
    cursor: zoom-in;
  }

  .image-item {
    flex: 1 0 28%;
    min-width: 200px;
    cursor: zoom-in;
  }

  .image-item-1 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 250ms cubic-bezier(0.79, 0.25, 0, 1.07);
  }

  .image-item-1:is(:hover, :focus) img {
    transform: scale(1.03);
  }

  .image-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 250ms cubic-bezier(0.79, 0.25, 0, 1.07);
  }

  .image-item:is(:hover, :focus) img {
    transform: scale(1.03);
  }

}


@media (min-width: 360px) and (max-width: 529px) {

  *, *::after, *::before {
      border: 0;
      margin: 0;
      padding: 0;
      /* box-sizing: border-box; */
  }

  :root {
    --hue: 206;
    --bkg: var(--hue) 50% 96%;
    --text: var(--hue) 70% 9%;
    --dark: var(--hue) 70% 3%;
  }

  .image-container {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    /* gap: 1rem; */
    overflow: hidden;
  }

  .image-item-1 {
    flex: 1 0 28%;
    min-width: 200px;
    cursor: zoom-in;
  }

  .image-item {
    flex: 1 0 28%;
    min-width: 200px;
    cursor: zoom-in;
  }

  .image-item-1 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 250ms cubic-bezier(0.79, 0.25, 0, 1.07);
  }

  .image-item-1:is(:hover, :focus) img {
    transform: scale(1.03);
  }

  .image-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 250ms cubic-bezier(0.79, 0.25, 0, 1.07);
  }

  .image-item:is(:hover, :focus) img {
    transform: scale(1.03);
  }

}