.aws-tiles {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

.aws-tiles .tile {
  position: relative;
  width: 7vw;
  min-width: 120px;
  color: inherit;
  padding: .4em;
  margin: .4em;
  font-size: .6em;
  line-height: 1;

  transition: transform .4s, background-color .2s;
  z-index: 100;
}

.aws-tiles .tile:hover {
  background-color: #fff;
  transform: scale(1.4);
  z-index: 101;
  box-shadow: 0 .1em .3em rgba(0, 0, 0, .2);
}

.darkmode .aws-tiles .tile:hover {
  background-color: #000;
}

.aws-tiles .tile:before {
  content: ' ';
  position: relative;
  display: block;
  width: 100%;
  height: 5vw;
  min-height: 50px;
  background-repeat: no-repeat;
  background-size: auto 80%;
  background-position: center center;

  filter: saturate(75%);
  transition: filter .3s;
}

.aws-tiles .tile:hover:before {
  filter: saturate(100%);
}

.aws-tiles .tile h3 {
  padding: 0 0 .3em 0;
  margin: 0;
  text-align: center;
  font-weight: bold;
}

.aws-tiles .tile h3:before {
  content: 'AWS ';
  opacity: .5;
}

/* operations */
a.aws-vpc:before {
  background-image: url('../img/aws/aws-vpc.png');
}

a.aws-ec2:before {
  background-image: url('../img/aws/aws-ec2.svg');
}

a.aws-ecs:before {
  background-image: url('../img/aws/aws-ecs.png');
}

a.aws-efs:before {
  background-image: url('../img/aws/aws-efs.png');
}

a.aws-s3:before {
  background-image: url('../img/aws/aws-s3.png');
}

a.aws-cloudfront:before {
  background-image: url('../img/aws/aws-cloudfront.png');
}

a.aws-lambda:before {
  background-image: url('../img/aws/aws-lambda.png');
}

a.aws-sqs:before {
  background-image: url('../img/aws/aws-sqs.png');
}

a.aws-cloudwatch:before {
  background-image: url('../img/aws/aws-cloudwatch.svg');
}

/* CI/CD */
a.aws-codecommit:before {
  background-image: url('../img/aws/aws-codecommit.png');
}

a.aws-codebuild:before {
  background-image: url('../img/aws/aws-codebuild.png');
}

a.aws-ecr:before {
  background-image: url('../img/aws/aws-ecr.png');
}

a.aws-cloudformation:before {
  background-image: url('../img/aws/aws-cloudformation.png');
}

/* security */
a.aws-kms:before {
  background-image: url('../img/aws/aws-kms.png');
}

a.aws-secretsmanager:before {
  background-image: url('../img/aws/aws-secretsmanager.png');
}

a.aws-iam:before {
  background-image: url('../img/aws/aws-iam.png');
}

a.aws-guardduty:before {
  background-image: url('../img/aws/aws-guardduty.svg');
}

a.aws-organizations:before {
  background-image: url('../img/aws/aws-organizations.png');
}

a.aws-cloudtrail:before {
  background-image: url('../img/aws/aws-cloudtrail.png');
}