.browser-outdated-section {
  --backdrop-bg-color: var(--transparent-300);
  --container-bg-color: var(--white-100);

  position: fixed;
	top: 0;
	left: 0;
	z-index: 3;
  background-color: var(--backdrop-bg-color);
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center;
	display: none;
}

.browser-outdated-section.visible {
  display: flex;
}

.browser-outdated-section .container {
  background-color: var(--container-bg-color);
	position: relative;
	display: flex;
	flex-direction: column;
	width: 45rem;
	height: auto;
	max-width: 95%;
	padding: 2rem;	
	row-gap: 2.5rem;
}

.browser-outdated-section .close-browser-outdated-section {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: fit-content;
}

.browser-outdated-section .close-browser-outdated-section:after {
  display: block;
  mask-image: url("../../assets/icons/close.svg");
  -webkit-mask-image: url("../../assets/icons/close.svg");
}

.browser-outdated-section hgroup {
  text-align: center;
}

.browser-outdated-section .browser-list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  row-gap: 2rem;
  flex-wrap: wrap;
}

.browser-outdated-section .browser-item a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.browser-outdated-section .browser-item a:hover .browser-name {
  text-decoration: underline;
}

.browser-outdated-section .browser-name {
  max-width: 6rem;
  text-align: center;
}