@charset "UTF-8";

:root 
{
  --loghi-height: 120px;
}

#loghi-section-before 
{
  margin: 0;
  padding: 0;
  
  background-color: #333333; 
  height: 1px;
  width: 100%;
}
#loghi-section 
{
  margin: 0;
  padding-top: 50px;
  padding-bottom: 50px;
  
  width: 100%;
  height: var(--loghi-height);
  
  background-color: white;
  
  text-align: center;
}
#loghi-section:before 
{
  height: 5px;
  width: 100%;
  
  background-color: #333333;
}
#loghi-container 
{
  margin: 0;

  width: 100%;
  height: var(--loghi-height);
  
  /*column-count: 6;*/
  /*column-gap: 20px;*/
  /*row-gap: 20px;*/
  
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-gap: 20px;
  grid-row: var(--loghi-height);
  /*flex-direction: row;*/
  /*flex-flow: column;*/
  
  justify-content: space-between;
}

#loghi-container  a
{
  margin: 0;
  
  display: flex;
  
  width: 100%;
}
#loghi-container  img
{
  margin: 0 auto;
  display: block;
  
  max-width: var(--loghi-height);
  max-height: var(--loghi-height);
  
  object-fit: contain;
  -webkit-object-fit: contain;
}

@media screen and (max-width: 1024px) 
{
  :root
  {
    --loghi-height: 100px;
  }
  
  #loghi-section 
  {
    height: unset;
  }
  
  #loghi-container
  {
    grid-template-columns: repeat(4, 1fr);
    grid-column-gap: 25px;
    grid-row-gap: 40px;
    grid-row: unset;
    height: unset;
  }
}

@media screen and (max-width: 600px)
{
  :root
  {
    --loghi-height: 90px;
  }
  
  #loghi-container
  {
    grid-template-columns: repeat(2, 1fr);
    grid-row: unset;
    grid-row-gap: 45px;
    height: unset;
  }
}

@media screen and (max-width: 414px) 
{
  :root 
  {
    --loghi-height: 80px;
  }
}

@media screen and (max-width: 320px)
{
  :root
  {
    --loghi-height: 65px;
  }

  #loghi-container
  {
    grid-column-gap: 35px;
  }
}