/* Large screens ----------- */
@media only screen 
and (min-width : 1824px), screen and (max-device-width : 1824px) {
  /* Styles */
}

/* Small Screens ----------- */
@media only screen 
and (max-width : 1224px), screen and (max-device-width : 1224px) {
  /* Styles */
  .home-links
  {
    display: grid;
    grid-gap: 10px;
  }

  .event 
  {
	  grid-template-columns: 1fr 1fr;
  }
  .event-header 
  {
    grid-column: span 2;
    text-align: center;
  }

  .factions {
    display: grid; 
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, min-content);
    grid-template-rows: repeat(2, -webkits-min-content);
  }
  
  .factions-title {
    grid-column: span 3;
  }

/* Search and Profile Change */
@media only screen 
and (max-width : 950px), screen and (max-device-width : 950px) {
  /* Styles */
  .content {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 1fr;
    grid-template-areas: 
    "news"
    "event"
    "home-links" 
    "seasons"
    "totm"
    "faction";
  }
}

/* Left Nav Change */
@media only screen 
and (max-width : 768px), screen and (max-device-width : 768px) {
  /* Styles */
}

/* Tablet (portrait and landscape) ----------- */
@media only screen 
and (max-width : 1024px), screen and (max-device-width : 1024px) {
  /* Styles */
}

/* Tablet (portrait) ----------- */
@media only screen 
and (min-width : 720px) 
and (max-width : 768px) 
and (orientation : portrait), screen and (min-device-width : 720px) 
and (max-device-width : 768px) 
and (orientation : portrait) {
    /* Styles */

    .factions {
      display: grid; 
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(3, min-content);
      grid-template-rows: repeat(3, -webkits-min-content);
    }
    
    .factions-title {
      grid-column: span 2;
    }
    
}

/* Tablet (landscape) ----------- */
@media only screen  
and (max-width : 1024px) 
and (orientation : landscape), screen and (max-device-width : 1024px) {
    /* Styles */
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (max-device-width : 480px), screen and (max-width : 480px) {
    /* Styles */
  .event 
  {
	  grid-template-columns: 1fr;
  }
  .event-header 
  {
    grid-column: span 1;
    text-align: center;
  }

  .factions {
    display: grid; 
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, min-content);
    grid-template-rows: repeat(3, -webkits-min-content);
  }
  
  .factions-title {
    grid-column: span 2;
  }
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (max-width : 480px) 
and (orientation : landscape), screen and (max-device-width : 480px) and (orientation : landscape) {
    /* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px), screen and (max-device-width : 320px) {
    /* Styles */
  input, textarea, .ui-widget-content {
    max-width: 200px;
  }
}